Directory Structure Changes 2 Creating new skins through Themes and Templates




Download 71.01 Kb.
NameDirectory Structure Changes 2 Creating new skins through Themes and Templates
A typeDirectory
manual-guide.com > manual > Directory




Skin Conversion Guide to MasterPage Tutorial
Table of Contents

Overview 2

Asp.net Themes and Directory Structure Changes 2

Creating new skins through Themes and Templates 4

Invoking a Theme 4

Tokens 5

Conversion 6

Menu 10

Summary 12

Frequently Asked Questions 12

Troubleshooting Guide 13
Skin Conversion Guide to MasterPage Tutorial



  1. Overview


This guide covers converting the template.ascx into MasterPage templates. However, we will not be removing support for the old skinning engine. Instead we will support both old style skinning and MasterPage style skinning. The MasterPage feature also covers not only the templating part, but also converting most of the code-behind generated html presentation into user controls.
For this document we’ll refer to the original skinning template as skin template and the masterpage as master template.

As with the move to using MasterPage templates, Asp.net themes were also incorporated into the website. This is to have better design-time support for the template and the actual pages.



  1. Asp.net Themes and Directory Structure changes


Asp.net Themes require a predefined directory named App_Themes. However, due to the nature of our original skinning architecture, we have both the template file and the styles located in the skins/skin_{N} folder.

Upon switching to themes we had to break the skins directory into 2 parts which is the App_Themes and App_Template. The reason for this is the App_Themes is a reserved folder for asp.net. You can only put style.css, images and .skin files on it. We have to create another folder to include other files that we support per skin basis. App_Template folder will include the xml packages.


If you will notice there are new files that are introduced in the skins folder, empty.master, empty2.master, expresstemplate.master, template.master are used as counter part of skin base empty.ascx, empty2.ascx, expresstemplate.ascx, template.ascx for master base setting. You can also use a hometopintro1.htm file for your home page.

    1. Creating new Skins through Themes and Templates




  1. Open AspDotNetStorefront ML in Microsoft Visual Studio 2008 then go to App_Theme folder. Create a new folder, the format should be Skin_N where N is any number (e.g. “Skin_2” since the build is pre loaded with Skin_1).

  2. Copy the contents of Skin_1 folder to your Skin_N folder. Make sure that it contains the Image folder, Style Sheet and Common.skin file.

  3. Next, go to App_Template and create a new folder. This should have the same name as the folder you created in App_theme. (e.g. “Skin_2”)

  4. Copy the contents of Skin_1 folder. You can now configure your store site’s appearance in the template.master.

  5. Go to Design Mode to check the run-time design of your store site.

  6. Change the web.config page attribute to the folder name you created


2.2. Invoking a Theme
Upon installation, Skin 1 is the default theme. Most sites have one theme, but it is possible to have multiple themes for a single site. Themes are identified as numbers (e.g. skin_1, skin_2, etc. For now, we follow the naming convention from previous builds)
Themes are explicitly invoked via:

http://www.yourdomain.com/default.aspx?skinid=1

(to load theme 1)

http://www.yourdomain.com/default.aspx?skinid=2

(to load theme 2)


  1. Tokens


Please consult the full manual for a list of all “tokens” which can be included in your skin template files. There are about 150 tokens which are supported, for common dynamic elements like “put username here”, “put logout link here”, “show a root list of categories here”, etc…

For MasterPage, tokens are implemented via asp.net custom expression style in this format:
<%$ Tokens:{The token name} {Optional parameters} %>
To illustrate:
(!PAGEINFO!) will be <%$Tokens:PAGEINFO%>
This is a new and improved parsing method that allows the page developers to view the dynamic token in the design mode. The parser token can be placed as a string on a property control such as Text and Visible attribute.
Ex.



and


Basic Tokens:



  1. <%$Tokens:PageInfo%>

This line is optional, but EXTREMELY helpful for debug/run-time info. And we STRONGLY ask that you leave them in your skin, to help with any customer support we may need to provide.



  1. <%$ Tokens:UserName%>

This is the login name of the customer. If the customer is not registered this portion will be blank.


  1. <%$Tokens:SignInOut_Link%>

This is for the link redirect. If the customer is registered and this is clicked, he will be redirected to the “logout.aspx” link. If not registered, the link URL will be on “signin.aspx”



  1. <%$Tokens:SignOut_Text%>

This is what the customer will see if they log out at run time.





  1. <%$Tokens:Num_Cart_Items%>

This will return the number of items in the shopping cart



  1. Conversion


For converting an existing skin template.ascx into template.master, you’ll need to follow these steps.


  1. The head tag of the template must have runat=server attribute.

    1. This is to support asp.net Themes

    2. Remove the stylesheet reference. It will be added automatically by asp.net depending on the theme used.

    3. Replace Parser tokens into its expression equivalent using the Tokens expression.

    4. Add the javascript reference line for core.js (located at the root jscripts folder)



Skin Template


Master Template





  1. Add a
    tag to the page. For this version, the form element will be a prerequisite. Preferably placed right after the tag.

    1. There can only be 1 form tag on the template. An existing one is the search form, which needs to be removed in favor of the search user control.





    1. Replace that with






    1. Now it’s safe to add the form tag





  1. Change the control type of the PageContent from Placeholder to ContentPlaceHolder. Keep in mind that the ID should remain the same and is required to be “PageContent”. This will serve as the content area for the child pages.


Skin template uses


Master template uses







  1. Convert the pages into Masterpage child pages

    1. Open any aspx page (in this example we used default.aspx) then add the MasterPageFile directive

      1. This is so as to have design-time support and visualization of the current page as part of the MasterPage.






    1. Now that the page will be living inside the MasterPage, you’ll need to tweak the page so as to accommodate the content areas that the masterpage provides.

      1. Strip the page of any html markup other than what should be present in the content itself.

      2. Add an asp.net Content control as the root control on the page. Make sure that ContentPlaceHolderID is “PageContent”

      3. Add a panel with an ID of “pnlContent” as the only child control of the Content control

      4. Insert the contents of the page inside the pnlContent control.

      5. If there are tags, remove it. Only the masterpage file can have the form tag.


Design time appearance of the MasterPage:


Default.aspx as child page




Design time appearance of default.aspx page





  1. Replace the ComponentArt menu with asp.net Menu. This will be discussed in the next section.




  1. Menu


As of the Ashland version, we’re dropping support for the ComponentArt menu in favor of the asp.net Menu.
Menu Datasource

The ComponentArt menu uses menudata.xml as it’s datasource for menu items. The asp.net Menu control uses its own sitemap provider for the menu. The sitemap structure and content can be found on the xml package page.menu.xml.config.

Menu Sitemap structure


Styling the Menu

The default look and feel of the asp.net menu is also the same as the previous ComponentArt although the css styles are different. The asp.net menu control uses its own styles which can be found on the default theme’s style.css. The class names have aspnetMenu prefixes so they can be easier to find.

Template Controls
The Ashland version also started incorporating user controls into the site.
Search Control

  • The search UI and functionality has been encapsulated into a user control. Before, it has its own tag which breaks the postback of the pages.





Entity Control


  • Displays the vertical menu for the entities like Category, Manufacturer and Section.

  • This replaces the rev xml packages which will be obsolete.



Select List Controls


  • These controls are provide options to change settings for

    • Locale

    • Currency

    • VAT




  1. Summary


This guide provided information on converting the skin template to master template. There is still support for the old skinning, however, the preferred approach now is to use MasterPages as this will help greatly in the design-time support.


  1. Frequently Asked Questions


Q: Am I allowed to add another content placeholder on my default MasterPage?

A: Yes. You will need to handle that per page if you want to introduce content.

Q: Can I use my existing ComponentArt menu?
A: For this version, we chose not to support ComponentArt.
Q: Can I use my customized ComponentArt menu styles?
A: We’ve deprecated those styles. The default skin 1 was designed to look like the old ComponentArt version. Customize the asp.net styles instead.
Q: Will Parser tokens still be supported?
A: Parser tokens will still be supported except for the Metatitle, Metadescription and Metakeywords. Parser token through custom expression is the preferred migration path.


  1. Troubleshooting Guide



  • Broken images in template through usage of (!SKINID!) parser token

    • You can reference it through the App_Themes directory although it won’t give you design-time visual on the MasterPage.




    • The preferred approach is to use either:




      • Asp.net Theme’s SkinID property





      • Or the Token:SkinImage





    • For topic pages, hardcoded links to skins/skin_N/images should be corrected to reference App_Themes/Skin_N/images folder.




  • Template won’t show preview on DreamWeaver or similar tools

    • Dreamweaver determines whether to show a preview mode depending on the extension of the file. It doesn’t recognize the .master extension.

    • The preferred editor is Visual Studio.



  • Page just refreshes after a postback action

    • There might be a nested tag. The main form tag is declared on the MasterPage and is required to be there only. All the pages should not have their own form tags.

    • If a customization is done that requires its own form tag, a workaround would be to separate that into another page and provide a button to redirect to that page instead.




  • Error: Cannot set property value to property name for a user control upon loading the designer.

    • This is a bug with Visual Studio 2008. You might need to restart the IDE to view the control. For more information, see https://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=361826




  1. Parser Token Conversion Table



Parser Token

Replacement


Navigation/SE related

* These are considered as intrinsic of the current page; therefore placeholders are all that’s necessary. Will get filled in at runtime



(!METATITLE!)

<br /></td> </tr> <tr valign=top> <td width=207> <br />(!METADESCRIPTION!)<br /></td> <td width=284> <br /><meta name="description" content=""><br /></td> </tr> <tr valign=top> <td width=207> <br />(!METAKEYWORDS!)<br /></td> <td width=284> <br /><meta name="keywords" content=""><br /></td> </tr> <tr valign=top> <td width=207> <br />(!SECTION_TITLE!)<br /></td> <td width=284> <br />Asp.net Literal control with id of <i>"SectionTitle"</i><br /></td> </tr> <tr> <td colspan=3 width=520 height=3 valign=top> <br /><br />Common<br /></td> </tr> <tr valign=top> <td rowspan=11 width=1 height=3> <br /><br /><br /></td> <td width=207> <br />(!SKINID!)<br /></td> <td width=284> <br />Tokens:SkinID<br /></td> </tr> <tr valign=top> <td width=207> <br />(!PAGEINFO!)<br /></td> <td width=284> <br />Tokens:PageInfo<br /></td> </tr> <tr valign=top> <td width=207> <br />(!NUM_CART_ITEMS!)<br /></td> <td width=284> <br />Tokens:Num_Cart_Items<br /></td> </tr> <tr valign=top> <td width=207> <br />(!SIGNINOUT_LINK!)<br /></td> <td width=284> <br />Tokens:SignInOut_Link<br /></td> </tr> <tr valign=top> <td width=207> <br />(!SIGNINOUT_TEXT!)<br /></td> <td width=284> <br />Tokens:SignInOut_Text<br /></td> </tr> <tr valign=top> <td width=207> <br />(!USERNAME!)<br /></td> <td width=284> <br />Tokens:UserName<br /></td> </tr> <tr valign=top> <td width=207> <br />(!BUYSAFEJSURL!)<br /></td> <td width=284> <br />Tokens: BuysafeJSUrl<br /></td> </tr> <tr valign=top> <td width=207> <br />(!BUYSAFESEAL!)<br /></td> <td width=284> <br />Tokens: BuysafeSeal<br /></td> </tr> <tr valign=top> <td width=207> <br />(!CURRENCY_LOCALE_ROBOTS_TAG!)<br /></td> <td width=284> <br />Tokens: Currency_Locale_Robots_Tag<br /></td> </tr> <tr valign=top> <td width=207> <br />(!AppConfig Name="<i>xxx</i>"!)<br /></td> <td width=284> <br />Tokens:AppConfig, <i>xxx</i><br /><br />Tokens:AppConfigBool, <i>xxx</i><br /><br />Tokens:AppConfigUSInt, <i>xxx</i><br /></td> </tr> <tr valign=top> <td width=207> <br />(!XmlPackage Name="<i>xxx</i>"!)<br /></td> <td width=284> <br />Tokens:XmlPackage, <i>xxx</i><br /><br />Tokens:XmlPackage, <i>xxx</i>, <i>{additional runtime parameters ampersand delimited}</i><br /></td> </tr> <tr> <td colspan=3 width=520 height=3 valign=top> <br /><br />Controls/Behavior related<br /></td> </tr> <tr valign=top> <td rowspan=8 width=1 height=3> <br /><br /><br /></td> <td width=207> <br />Rev Xml Packages<br /></td> <td width=284> <br />Entity control<br /><br />* Converted into user control in order to provide better design-time layout. Original xml package can still be used.<br /></td> </tr> <tr valign=top> <td width=207> <br />(!COUNTRYSELECTLIST!)<br /></td> <td width=284> <br />LanguageSelectList control<br /></td> </tr> <tr valign=top> <td width=207> <br />(!CURRENCYSELECTLIST!)<br /></td> <td width=284> <br />CurrencySelectList control<br /></td> </tr> <tr valign=top> <td width=207> <br />(!VATSELECTLIST!)<br /></td> <td width=284> <br />VATSelectList control<br /></td> </tr> <tr valign=top> <td width=207> <br />(!POLL!)<br /></td> <td width=284> <br />Poll control<br /></td> </tr> <tr valign=top> <td width=207> <br />(!MINICART!)<br /></td> <td width=284> <br />Deprecated in favor of the ajax minicart<br /></td> </tr> <tr valign=top> <td width=207> <br />Topsearchform<br /></td> <td width=284> <br />Search control<br /><br />* Deprecated due to having it’s own <form> tag hanlding it’s own postback.<br /></td> </tr> <tr valign=top> <td width=207> <br />Add to cart form<br /></td> <td width=284> <br />Addtocart’s behavior was modified from having a having it’s own <form> tag and postback url for each instance originally(addtocart.aspx) to making it postback to the current page . Add to cart processing now happens in showproduct.aspx code-behind.<br /></td> </tr> </TBODY> </table> </DL> <br /><div> <br />Page <br /><br /></div></form></form></meta></meta>

Share in:

Related:

Directory Structure Changes 2 Creating new skins through Themes and Templates iconDirectory Structure 5

Directory Structure Changes 2 Creating new skins through Themes and Templates iconDirectory Structure 6

Directory Structure Changes 2 Creating new skins through Themes and Templates iconAppendix a – outreach materials & templates outreach material and templates

Directory Structure Changes 2 Creating new skins through Themes and Templates iconIn mixed ability classrooms, group structure can provide benefits...

Directory Structure Changes 2 Creating new skins through Themes and Templates iconThe PowerCat kit is designed around the JetCat pht3 turbine mechanics....

Directory Structure Changes 2 Creating new skins through Themes and Templates iconI. Unit Themes

Directory Structure Changes 2 Creating new skins through Themes and Templates iconAdditional Resources Alignment with Themes

Directory Structure Changes 2 Creating new skins through Themes and Templates iconCreating a data-dictionary subclass for each data file, naming the...

Directory Structure Changes 2 Creating new skins through Themes and Templates iconXml publisher Templates by Example

Directory Structure Changes 2 Creating new skins through Themes and Templates iconDirectory. In the temporary directory, locate “CP003732. exe.” Extract the contents

Directory Structure Changes 2 Creating new skins through Themes and Templates iconDss key Label Templates (English us)

Directory Structure Changes 2 Creating new skins through Themes and Templates icon[image: /templates/s40 restyle 1/images/sapelink png]

Directory Structure Changes 2 Creating new skins through Themes and Templates icon1. 2References sap bw online Documentation 2Creating Workbook Templates in Excel

Directory Structure Changes 2 Creating new skins through Themes and Templates icon2. Creating the Files

Directory Structure Changes 2 Creating new skins through Themes and Templates iconIntroduction Creating Schedules

Directory Structure Changes 2 Creating new skins through Themes and Templates iconCreating and saving a document

Directory Structure Changes 2 Creating new skins through Themes and Templates iconGuidelines for Creating Labs 19

Directory Structure Changes 2 Creating new skins through Themes and Templates iconManually creating purchase orders 89

Directory Structure Changes 2 Creating new skins through Themes and Templates iconManually Creating Purchase Requests 8

Directory Structure Changes 2 Creating new skins through Themes and Templates iconChapter 1: Creating Blue Oceans Overview




manual




When copying material provide a link © 2017
contacts
manual-guide.com
search