Sunday, September 19, 2010

70-562 Dynamic Data

Object Relational Mappers, for example Linq and Entity Framework are well integrated in VS 2008, and have project template available; Dynamic Data Web Site.

Creating a dynamic data web site project is a good way to explore the server controls and datasources offered via the toolbox menu.

This template starts out witha basic website shell, but the connection string isnt configured. The Linq to SQL and Entity to SQL are the ORM offered and by default use the default databse located in App_Data folder of this template project.

The designer.cs file defines the data model and wraps the objects around it in order to access the data model via code.

In the global.asax contains the RegisterRoutes method that comes with a default model.RegisterContext method of the type YourDataConectType, you will replace this one with your data context which, after having created the model pointing to your database should be avaialble in intellisence under the name yourDatabaseNameDataContext.
ScaffoldAllTables to true will include all the tables in the model.

At th8is point it's possible to run the website and default.aspx that will show the various tables in your model and page the content of each table when clicking on the table.

If you notice the form of the URL, this can be customized through routing in the global.asax file, using the ASP.Net routing engine.

In this site, there is no code generation, the sturction is based on templates and is dynamic thanks to routing features that reuse the same edit.aspx page for each item.

For example this routing defintion is defuined by routes.Add(new DynamicRoute("{Table}/{actions}.aspx"));

There is a lot to say on ORMs and Dynamic Data layers, the purpose of this section was mostly to summarize some of the VS2008 features that make using Linq and EF faster and customizable.

70-562 Security Trimming

Security Triming is achieved by putting a web.config in each folder... each aspx file has its own folder denies * all users, and db tables in the app_data folder can be maintained with the website administration tool
wwebadmin tool can be started from website->configuration then you click on the security link, then manage users so there's two layers of security, the ones in the app_data folder and the ones in web.config that overide

Web adminstration tool can use both both form and windows authentication, windows is handled by iis there is a control for the login button, and one to display the login user user in the sitemap section of the web.config needs to say securityTrimming enabled if a node doesnt have a page associated with it, the node needs to have roles attribute to allow to access to any pages in it's subfolder, or is this just to show the menu item in the sitepath control?

Giving roles to a sitemap node just show the node doesnt give access to the page, this is done in the child web.config files

70-562 Navigation API

You can add custom attributes for each node in the xml file, like the sound and image of an animal to set to label and img you can check if there is a previous sibling to add a previous button(set the button to visible, do all this in page_load in general when testing new features, you can add a checkbox to display info to make sure you can read it, even it's if its irrevelant for the user to see, you just add labels at the bottom of the page, and you can even add this in the master page as a footer, you could put all this in the server div control and use innerHTML property you can use it for rewriting(rerouting) urls so they dont include query string, in the web.config in urlMappings element. Might want to put these mappings in an external .config (set the configSource attrtibute of the urlMappings elementconfiguration file, external config change doesnt cause an application restart.

Setting the url in the sitemap file also allows to remap urls sitemap files to have child sitemap files.

70-562 Navigation

Defining the structure of the site, can be done with sitemap, that can be stored in xml file you can build your own, or create navigation controls.


default xml file is web.sitemap, or can use other sources

you can create your own from defiving from the SiteMapProvider, StaticSiteMapProvider you would bind a menu or tree view to the sitemap file.

There is a difference puting a slash before a relative url implies this slash is the root folder of the application you can use the ~ to the root directory of the application, because the relative would be affected by location of the master page since it's the containter.

Navigation features:

  • create a sitemap file, containes siteMapNode elements, contains real and virtual page
  • sitemap file integrates localization
  • navigation controls, available from toolbox->Navigation siteMapNode attributes, title, url, and desctiption(tooltip)
SiteMapPath, Menu, TreeVie, comonly put in the masterpage, on the control set the SiteMapProvider property.

SiteMap can mess up layout if you go deep, configure the max level properties, set the staticdisplaylevel property

A big part of styling navigation is to format those controls, there is autoformat property with presets and preview, msdn is a good one.

The menu control have alot of static and dynamic properties, the breadcrumb control, you can tell the menu to fly out horizontal or vertical, change the seperator for each menu; there are templates for the breadcrub control by default menus will never match the style of the website, but can be configured to anything, there is alot of style customization.

70-562 Master Pages

New content placeholder control, need one for any place holding content

We never navigate to a master page but to a content page and knows it should render the master page.

Their exist two default content place holder.
You can select a master page with the checkbox at the time you create a page.aspx. The new page will now have 2 content place holder one  for head and one for body. Note: There can't be any or head tag in a master page

Master pages can specify default content for pages that don't use a specific place holder, you just add a place holder and add content in it, to generate the new place holder on the page you can select the default place holder, right click->add new place holder.

Typically, the whole content of the master page is put in a table, each place holder in their own cell, in design mode you create a table bellow the place holders, adjust cells(merge cells if needed) and the master page content inside the table + place all the place holders inside cells, then you move the whole table inside the div tag of the master page, go in the style property of the table and set the width to 100%

You can nest master pages, so the sub-master page containing a menu references the base master page that contains the header/footer.

So the base master page has content and place holders, the sub-master page has it's content inside the corresponding place holders of the baseMasterPage, and the content page has it's content inside the palceholders corresponding to the menuMasterPage(subMasterPage).

70-562 Themes

Theme applies to on the server side on the aspnet control while css client side by the browser
themes are located in teh app_themes folder and defined in skin folders contained in subfolders of the app_theme name of the folder defines the name of the theme

To make a label skin, you take a control markup(or style it through the UI first) and remove everything that's specific to the single control, because it's going to be reused for all control of that type, but it's possible to created named instances of a theme to apply to one instance of a control it is applied to the page, on the docuemnt(or page object?) object and theme property, can also be set in teh page directive, can also be set at runtime in teh preInit event by setting the Theme or StyleSheetTheme property, allowing the user to pick a theme, if you set in the session vairable is good, Page.Theme = Session{"SelecteTheme"].ToString(); to fill a listbox with themes, you do a DirectoryInfo dirThemes = DirectoryInfo(Server.MapPath("App_Themes")) then set the ddl.DataSource = dirThemes.GetDirectories(); ddlThemes.DataBind(); you can aslo set the ddl.SelectedValue = Page.Theme to show the current theme as default in the ddl.

You can put the selected value in Session["SelectedTheme"] = ddlThemes.SelectedValue; and refresh teh page with Server.Transfer(Request.FilePath); the stylesheettheme property of the page(document?) treats the theme as a stylesheet, normaly a theme overrides properies set at design time the EnableTheming property of any control can be set to false.

For named themes create the theme with a SkinID and set this SkinID on the control, so within a skin file you can have both a default skin for the label control and a one with a SkinID attribute, you can have more than one
control use a the named skin, for any page that uses that theme if you specify an imageUrl of an image button in the theme, the path to the image are always relative to the theme folder. If the theme folder includes a css file, this one is also applied.

A theme can be applied at the site level to the whole site.

70-562 CSS Style Tools

HTML can be styled by wrapping, lets say I want to style the the content of the body.

For example a header in bold. Another way of doing this is to apply the style to the HTML using the style attribute of the HTML element. You can test those in split mode in the visual studio designer to see the effects right away

Or i could make a file called something.css and copy my css elements to that stylesheet and reference it from my html file

this file can be in the root if it's in subfolder just include the subfolder in the path it can also be on another web server you just reference it with a url rather than a path to a local file

cascading order
from lowest to highest precedence
2-external stylesheet
3-internal stylesheet
4-inline styles

note: within a sheet the order matter in the stylesheet, the last one encountered is the one applied
note on xhtml validation: it is specified in the doctype at the top of the page, and visual studio also has it's validation
note on css classname: if you want more than one classname you just seperate them with spaces, that might be different from how it renders in visual studio
common font and text attributes

1-font like font-family, font-style, font-variant, font-weight, font-size, text-decoration
2-color you can use color keyword, system colors, rgb, and rgb as hex, as well as, this can be done for border colors, and backgroud colors too, btw if the rgb or hex numbers are all teh same it's some shade of grey
3-margins and alignemnet, this includes margin top right left bottom, text-indent, all those can be in points, inches, cm, px and text-align who can be left, center, right, very usefull to create a bulleted list with the exact indent or margin you want
4-postion, relative, absolute this is the main uses of css, to position things on the page, relative or absolute
relative is always relative to where the browser would have positionned it otherwise(not from border or page), top is the relavite position to top, same for left
absolute is always from the top and left border or the page
5-partiion elements using dive and span, the difference between the two is the div has a line break and span dosen't, for example if you to apply a style.

his you can test with id based, class based or element based, and put boggus styles to see
what it does when it can't find the font-family

use multiple font-family ebcause some computers dont have always fonts
first one is used unless not found
You can put a generic font family as last font, since it has a default.

you can also specify bolder and lighter, which makes the inherited weith lighter, if you want to remove the underline from a hyperlinke you set the text decoration to none.

different font families react differently to font weight

if it doesnt look as it should in visual studio design mode, look in the browser

you can limit a classname to an element of specific type like

font and margin attributes allow to consolidate like is family size weight and style, is top right bottom left

css tools: remember you can select an html element in source and it will be highlighted in design mode, or select it in design mode and it will be selected in source view

you can use the manage styles window alt+v+m to view the styles by order in the stylesheet, by element or by type you can preview a style by clicking on it and viewing it in the preview window at the bottom or the manage styles window

you can also preview a the code of a style by hovering above on of the css elements in the list, it will pop a tooltip with the css code a blue circle for element based style, red circle is a id based style and green is a class based style if there is a circle around it, it's because the style is used you can move things around to change precedence or control click to make a copy of the style dont forget, the last style down the list wins you can right click on a style to see how many elements apply this style, you can select them from that right click menu to highlight them you can create a new style, style copy, modify a style a delete a style, or attach a style sheet, or go to the code for the element if you doble ckcik ona styloe, you are taken directly to a style in code if you right  click modify on a style it opens the modify style designer UI, it has all the css attributes and values you need and a preview window, and a description window that wright the equivalent css code, just like in a sql query designer you can use the style application toolbar in auto mode to make it register everything style you would apply to a design mode aspx page and write it to the head as a css class of the selected element, this style application toolbar, if in manual mode, will show you available styles, with current page or name of the external file in perenthesis next to it If you set manual, select the target rule, and modify a control using the designer, it will add the attributes to the target css rule, if you choose new class it will add a class to the control existing css class(with space to sperate classes, if you choose new inline style as target it will add it inline in the html or server control element(in the markup), the target rule menu is contextual for the selected control, with styles availab le to it, you can also use this style application target to creat a new class based style it opens up a designer that asks you to place it the new style in a existing stylesheet or new one.

There is a button next to the target in the style application that allows you to reuse existing style so visual studio doent create a new one if it doesnt have to, you can toggle this off if you want it to leave existing styles alone, it wont delete the old one, just puts it later in the spreadsheet so the new style has last word and overides the existing

Next to the target rule that lets you highlight who are the members of this style(the ones that apply the same class), this is the show overlay button new style dialog box: right click on a existing stylesheet, add style rule, you choose an element and add it, creating a hiearchy of rules, , you can also add classes and IDs, preview windw shows you the rule hierachy preview(order in the file) you can also call the big modify style dialog by right clicking build style, this shows you all teh, allows you to enter all the many css styles

There is also a css properties pane, alt+v+c, that allows you to see for a selected element what rules are applied, and another pane bellow it that shows which css properties for the selected rule, applied(styles) are applied, you can click sumary to ony see the ones that are applied or unclick to show all of them, and youll see of full list even the ones that are not set and strike-through, ones in red that are overiden by other rules down the list, it's tooltip show you which which other rule overides it, and double click an element to go to the rule idself in code the more local style always win.