Day 4 of Chamber Musician Today - Classical music community

Forum:
- Community builds

Author	Message
Boz Zashev	27 Aug 2010 09:10 no-new-comments
Joined: 17 Dec 2008 Location: Plovdiv Bulgaria	In the forth day of the "Chamber Musician Today" community, we are going to build the global navigation and the secondary of the Community posts. Home page / Posts list Before we start lets review the wireframe and the current look of the page. This will give us better idea from where we start. wireframe current look When we compare both slides, the following differences are easily seen: different layout - the wireframe has a three column layout, the current view has only two columns advertisements - there are advertisement areas in the wireframe that does not appear in the current view global navigation - there are different links in the global navigation secondary navigation - in the wireframe new secondary navigation is introduced based on categories post presentation - the post elements and style is different sidebar content - the contents of the sidebars are different Let's start working on those sections one by one. Almost all of the next tasks need to be performed while you are logged in as an user with Architect or/and Builder roles assigned, and the Smart browse mode is enabled. 1.1. The page layout The available page layouts or skins are defined within the User Interface (UI) package applied for this page. Which UI package, layout or skin to be applied for a certain page is managed by its Master page. The fastest why to navigate to the correct Master page is to navigate to the page , click on the environment tab of the Smart browse and than the "manage" link of the master page. In our case the master page name was "Blog-Home MasterPage". The system opened the master page management screen in a new tab. I pressed the "Check out" button, so I can start applying the changes. For pages and master pages, the system will create a second copy while they are checked out. This copy will be presented in the Public site, only when the smart browse mode is enabled. This provides you the opportunity to work on a page without the changes to be seen by all site visitors. Once you are ready, you can "check in" the page, and make the changes available to everyone. You can also review the draft and the original by enabling and disabling the Smart browse mode. Checking out all other components will not create a draft copy of them and changes will be immediately presented to the site visitors after they are saved. Once the page is checked out, I click on the "User interface" master page tab. To check, if in the current UI package there is a three column layout, I click on the "manage layout and skin" link in the "UI package" grid. This presents me the UI package details and settings screen, which has three sections - General details about the package, Available layouts and Available skins. I see that there is a layout labled "Layout SCS" which on its thumbnail is presented like a three column layout, So I click on it to select it. A small yellow showed me that the selection is a fact, so I press the "Next" button. The next screen is presenting a comparison between the current layout and the one I am about to apply. I feel happy with the change so I press "Save" to apply it, without checking in the master page, as I want to apply some more changes. After the job was finished by the system, I "Smart browse" the Public site and see the change. The page is now with three columns. The previous left sidebar is now on my left. The content column is narrower. There is a white area on the right, which is showing that the page has a right sidebar but it has no webframes in it. Perfect. The layout change is ready. Global navigation The global navigation in the wireframes has the following items - Home, CD reviews, Calendar, Top members, Help, Search. There should be also one presented to administrators only and this is the "Blog" application administration. It is already present in the current page, but we will rename it to Admin and will secondary navigation that will provide access to the administration webframes of the all the three ITBrix.Blog applications we have installed - blog, CD reviews and calendar. To manage the global navigation menu, I right click on one of the menu items (eg. Home) to see the smart browse context menu and click on Settings. This will make the system to redirect me to the settings screen of the webframe my mouse was hovering, in this case the "Global navigation" webframe. Then I click on the "manage menu items" gray shortcut link on the upper right corner of the screen. This will checkout and open in a new tab the currently used navigation menu. OK. I am on the right place to change the global navigation. I delete the "categories" and "All posts" menu items, by clicking on their names to selected them than using their corresponding "delete" link. To rename the "Members" to "Top members", "Get started" to "Help" and "Administration" to "Admin", I am first selecting the items by clicking on them and than I use their "settings" link. This opens a two step wizard. I just change the menu item title with the correct one and press Next and than Save buttons, without any other change. You can see the scheduled change by a new menu item title and a small red star on its right. The next thing I should do is to create new menu items - CD reviews, Calendar and Search. I am doing that by clicking on the "create root menu item" link above the grid. On the first step of the same two step wizard, I type in the title of the item. leave the "URL node" radio button selected and press the Next button. On the second step I need to choose the correct URL node to bind the item too. In the current case the pairs are: menu item "CD reviews" binds to URL node with path "/cd-reviews" menu item "Calendar" binds to URL node with path "/calendar" menu item "Search" binds to URL node with path "/search" After the items are added to the list, with the help of the arrow icons, I am selecting and ordering them until they are in the correct order. I press the "Save" or "Save & check in" button to apply the changes I have made to the navigation menu. I browse again the public site and now the global navigation menu looks exactly as I want it. If I visit the public site as a not logged guest, the "Admin" menu item will not be presented, which means that the preset visibility attributes for this menu item are still OK. I am trying the menu by clicking on its items. All works fine. Secondary navigation - Categories To create the category based secondary navigation I have two alternatives: to create new navigation menu component and present it with a navigation menu webframe or to user the ITBrix.Blog.Categories webframe as the HTML it generates is pretty much the same as the one of a menu. I decided to take the second alternative, as in this way, if there is a change in the categories, it will be automatically applied in the secondary navigation.

Author

Message

27 Aug 2010 09:10 no-new-comments

Joined:
17 Dec 2008
Location:
Plovdiv
Bulgaria

In the forth day of the "Chamber Musician Today" community, we are going to build the global navigation and the secondary of the Community posts.

Home page / Posts list

Before we start lets review the wireframe and the current look of the page. This will give us better idea from where we start.

wireframe
current look

When we compare both slides, the following differences are easily seen:

different layout - the wireframe has a three column layout, the current view has only two columns
advertisements - there are advertisement areas in the wireframe that does not appear in the current view
global navigation - there are different links in the global navigation
secondary navigation - in the wireframe new secondary navigation is introduced based on categories
post presentation - the post elements and style is different
sidebar content - the contents of the sidebars are different

Let's start working on those sections one by one.

Almost all of the next tasks need to be performed while you are logged in as an user with Architect or/and Builder roles assigned, and the Smart browse mode is enabled.

1.1. The page layout

The available page layouts or skins are defined within the User Interface (UI) package applied for this page. Which UI package, layout or skin to be applied for a certain page is managed by its Master page.

The fastest why to navigate to the correct Master page is to navigate to the page , click on the environment tab of the Smart browse and than the "manage" link of the master page. In our case the master page name was "Blog-Home MasterPage". The system opened the master page management screen in a new tab. I pressed the "Check out" button, so I can start applying the changes.

For pages and master pages, the system will create a second copy while they are checked out. This copy will be presented in the Public site, only when the smart browse mode is enabled. This provides you the opportunity to work on a page without the changes to be seen by all site visitors. Once you are ready, you can "check in" the page, and make the changes available to everyone. You can also review the draft and the original by enabling and disabling the Smart browse mode.
Checking out all other components will not create a draft copy of them and changes will be immediately presented to the site visitors after they are saved.

Once the page is checked out, I click on the "User interface" master page tab. To check, if in the current UI package there is a three column layout, I click on the "manage layout and skin" link in the "UI package" grid. This presents me the UI package details and settings screen, which has three sections - General details about the package, Available layouts and Available skins. I see that there is a layout labled "Layout SCS" which on its thumbnail is presented like a three column layout, So I click on it to select it. A small yellow showed me that the selection is a fact, so I press the "Next" button. The next screen is presenting a comparison between the current layout and the one I am about to apply. I feel happy with the change so I press "Save" to apply it, without checking in the master page, as I want to apply some more changes.

After the job was finished by the system, I "Smart browse" the Public site and see the change. The page is now with three columns. The previous left sidebar is now on my left. The content column is narrower. There is a white area on the right, which is showing that the page has a right sidebar but it has no webframes in it.

Perfect. The layout change is ready.

Global navigation

The global navigation in the wireframes has the following items - Home, CD reviews, Calendar, Top members, Help, Search. There should be also one presented to administrators only and this is the "Blog" application administration. It is already present in the current page, but we will rename it to Admin and will secondary navigation that will provide access to the administration webframes of the all the three ITBrix.Blog applications we have installed - blog, CD reviews and calendar.

To manage the global navigation menu, I right click on one of the menu items (eg. Home) to see the smart browse context menu and click on Settings. This will make the system to redirect me to the settings screen of the webframe my mouse was hovering, in this case the "Global navigation" webframe. Then I click on the "manage menu items" gray shortcut link on the upper right corner of the screen. This will checkout and open in a new tab the currently used navigation menu.

OK. I am on the right place to change the global navigation. I delete the "categories" and "All posts" menu items, by clicking on their names to selected them than using their corresponding "delete" link.

To rename the "Members" to "Top members", "Get started" to "Help" and "Administration" to "Admin", I am first selecting the items by clicking on them and than I use their "settings" link. This opens a two step wizard. I just change the menu item title with the correct one and press Next and than Save buttons, without any other change. You can see the scheduled change by a new menu item title and a small red star on its right.

The next thing I should do is to create new menu items - CD reviews, Calendar and Search. I am doing that by clicking on the "create root menu item" link above the grid. On the first step of the same two step wizard, I type in the title of the item. leave the "URL node" radio button selected and press the Next button. On the second step I need to choose the correct URL node to bind the item too. In the current case the pairs are:

menu item "CD reviews" binds to URL node with path "/cd-reviews"
menu item "Calendar" binds to URL node with path "/calendar"
menu item "Search" binds to URL node with path "/search"

After the items are added to the list, with the help of the arrow icons, I am selecting and ordering them until they are in the correct order. I press the "Save" or "Save & check in" button to apply the changes I have made to the navigation menu. I browse again the public site and now the global navigation menu looks exactly as I want it.

If I visit the public site as a not logged guest, the "Admin" menu item will not be presented, which means that the preset visibility attributes for this menu item are still OK. I am trying the menu by clicking on its items. All works fine.

Secondary navigation - Categories

To create the category based secondary navigation I have two alternatives:

to create new navigation menu component and present it with a navigation menu webframe or
to user the ITBrix.Blog.Categories webframe as the HTML it generates is pretty much the same as the one of a menu.

I decided to take the second alternative, as in this way, if there is a change in the categories, it will be automatically applied in the secondary navigation.

There are no comments for this selection