From do-not-reply at jboss.org Tue Nov 29 23:57:55 2011 Content-Type: multipart/mixed; boundary="===============8904317545999207121==" MIME-Version: 1.0 From: do-not-reply at jboss.org To: gatein-commits at lists.jboss.org Subject: [gatein-commits] gatein SVN: r8160 - epp/docs/branches/5.2/Reference_Guide/en-US/modules/PortalDevelopment. Date: Tue, 29 Nov 2011 23:57:55 -0500 Message-ID: <201111300457.pAU4vthM015546@svn01.web.mwc.hst.phx2.redhat.com> --===============8904317545999207121== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable Author: smumford Date: 2011-11-29 23:57:54 -0500 (Tue, 29 Nov 2011) New Revision: 8160 Modified: epp/docs/branches/5.2/Reference_Guide/en-US/modules/PortalDevelopment/Sk= inning.xml Log: Cleaned Skinning.xml formatting Modified: epp/docs/branches/5.2/Reference_Guide/en-US/modules/PortalDevelop= ment/Skinning.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- epp/docs/branches/5.2/Reference_Guide/en-US/modules/PortalDevelopment/S= kinning.xml 2011-11-30 04:51:52 UTC (rev 8159) +++ epp/docs/branches/5.2/Reference_Guide/en-US/modules/PortalDevelopment/S= kinning.xml 2011-11-30 04:57:54 UTC (rev 8160) @@ -3,515 +3,541 @@ %BOOK_ENTITIES; ]> - - Skinning the Portal -
- Overview + + Skinning the Portal + = +
+ Overview + = JBoss Enterprise Portal Platform provides robust skinning supp= ort for the entire portal User Interface (UI). This includes support for sk= inning all of the common portal elements as well as being able to provide c= ustom skins and window decoration for individual portlets. This has been de= signed with common graphic resource reuse and ease of development in mind. - - -
- = -
- Skin Components + +
+ = +
+ Skin Components + = The skin of a page is composed of three separate parts: - + + = - Portal Skin - - - The portal skin contains the CSS styles for the po= rtal and its various UI components. This should include all the UI componen= ts except for the window decorators and portlet specific styles. - - - - + Portal Skin + = + + + The portal skin contains the CSS styles for the porta= l and its various UI components. This should include all the UI components = except for the window decorators and portlet specific styles. + + - - Window Styles - - - The CSS styles associated with the portlet window = decorators. The window decorators contain the control buttons and borders s= urrounding each portlet. Individual portlets can have their own window deco= rator selected or be rendered without one. - - - - + = + + Window Styles + = + + + The CSS styles associated with the portlet window dec= orators. The window decorators contain the control buttons and borders surr= ounding each portlet. Individual portlets can have their own window decorat= or selected or be rendered without one. + + - - Portlet Skins - - - The portlet skins dictate how portlets are rendere= d on the page. There are two main ways they can be effected: - - - - Portlet Specification CSS Classes - - - The portlet specification defines a se= t of CSS classes that should be available to portlets. JBoss Enterprise Por= tal Platform provides these classes as part of the portal skin. This allows= each portal skin to define its own look and feel for these default values. - - - - - - - Portlet Skins - - - JBoss Enterprise Portal Platform provi= des a means for portlet CSS files to be loaded based on the current portal = skin. This allows a portlet to provide different CSS styles to better match= the current portal look and feel. Portlet skins provide a much more custom= izable CSS experience than just using the portlet specification CSS classes. - - - - - - - - - - + = + + Portlet Skins + = + + + The portlet skins dictate how portlets are rendered o= n the page. There are two main ways they can be effected: + + = + + + Portlet Specification CSS Classes + = + + + The portlet specification defines a set of C= SS classes that should be available to portlets. JBoss Enterprise Portal Pl= atform provides these classes as part of the portal skin. This allows each = portal skin to define its own look and feel for these default values. + + + + = + + Portlet Skins + = + + + JBoss Enterprise Portal Platform provides a = means for portlet CSS files to be loaded based on the current portal skin. = This allows a portlet to provide different CSS styles to better match the c= urrent portal look and feel. Portlet skins provide a much more customizable= CSS experience than just using the portlet specification CSS classes. + + + + + - - + + = CSS Classes - - The window decorators and the default portlet specificatio= n CSS classes should be considered separate types of skinning components, b= ut they need to be included as part of the overall portal skin. The portal = skin must include these components' CSS classes or they will not be display= ed correctly. + = + + The window decorators and the default portlet specification= CSS classes should be considered separate types of skinning components, bu= t they need to be included as part of the overall portal skin. The portal s= kin must include these components' CSS classes or they will not be displaye= d correctly. - - A portlet skin does not need to be included as part of the= portal skin and can be included within the portlets web application. + = + + A portlet skin does not need to be included as part of the = portal skin and can be included within the portlets web application. - - - -
- = -
- Skin Selection + +
+ = +
+ Skin Selection + =
Skin Selection Through the User Interface - - A skin can be selected to be displayed to the user by mult= iple means. The easiest way to change the skin is to select it through the = user interface. An administrator can change the default skin for the portal= , or a logged in user can select which skin they would prefer to be display= ed. + = + + A skin can be selected to be displayed to the user by multi= ple means. The easiest way to change the skin is to select it through the u= ser interface. An administrator can change the default skin for the portal,= or a logged in user can select which skin they would prefer to be displaye= d. - - Please see the User Guide for= information on how to change the skin using the user interface. + = + + Please see the User Guide for = information on how to change the skin using the user interface. - -
- = +
+ =
Setting the Default Skin within the Configuration Files= - - The default skin can also be configured using the portal c= onfiguration files. This allows the portal to have the new default skin rea= dy for use when JBoss Enterprise Portal Platform is first started. + = + + The default skin can also be configured using the portal co= nfiguration files. This allows the portal to have the new default skin read= y for use when JBoss Enterprise Portal Platform is first started. - - The default skin of the portal is called Default<= /literal>. To change this value add a skin tag in the 02portal.war/WEB-INF/conf/portal/portal/classic/portal.xml= configuration file. + = + + The default skin of the portal is called Default. To change this value add a skin tag in the 02portal.war/WEB-INF/conf/portal/portal/classic/portal.xml = configuration file. - - To change the skin to MySkin you would = make the following changes: + = + + To change the skin to MySkin you would m= ake the following changes: - = - -
- = - -
- = -
- Skins in Page Markups +
+ + = +
+ Skins in Page Markups + = A JBoss Enterprise Portal Platform skin contains CSS styles fo= r the portal's components but also shares components that may be reused in = portlets. When JBoss Enterprise Portal Platform generates a portal page mar= kup, it inserts stylesheet links in the page's head tag. - + + = There are two main types of CSS links that will appear in the = head tag: a link to the portal skin CSS file and a link = to the portlet skin CSS files. - + + = - Portal Skin - - - The portal skin will appear as a single link to a = CSS file. This link will contain contents from all the portal skin classes = merged into one file. This allows the portal skin to be transferred as a si= ngle file instead of multiple smaller files. - - - - + Portal Skin + = + + + The portal skin will appear as a single link to a CSS= file. This link will contain contents from all the portal skin classes mer= ged into one file. This allows the portal skin to be transferred as a singl= e file instead of multiple smaller files. + + - - Portlet Skin - - - Each portlet on a page may contribute its own styl= e. The link to the portlet skin will only appear on the page if that portle= t is loaded on the current page. A page may contain many portlet skin CSS l= inks or none. - - - - + = + + Portlet Skin + = + + + Each portlet on a page may contribute its own style. = The link to the portlet skin will only appear on the page if that portlet i= s loaded on the current page. A page may contain many portlet skin CSS link= s or none. + + - - + + = In the code fragment below you can see the two types of links: - - = + CSS Classes - - Window styles and the portlet specification CSS classes ar= e included within the portal skin. + = + + Window styles and the portlet specification CSS classes are= included within the portal skin. - - - -
- = -
- The Skin Service + +
+ = +
+ The Skin Service + = The skin service manages the various types of skins. It is res= ponsible for discovering and deploying skins into the portal. - + + =
Skin configuration - - JBoss Enterprise Portal Platform automatically discovers w= eb archives that contain a file descriptor for skins (WEB-INF/gat= ein-resources.xml). This file is responsible for specifying the = portal, portlet and window decorators to be deployed into the skin service. + = + + JBoss Enterprise Portal Platform automatically discovers we= b archives that contain a file descriptor for skins (WEB-INF/gate= in-resources.xml). This file is responsible for specifying the p= ortal, portlet and window decorators to be deployed into the skin service. - - The full schema can be found at: . + = + + The full schema can be found at: . - - Below is an example of where to define a skin (My= Skin) with its CSS location, and specify some window decorator sk= ins: + = + + Below is an example of where to define a skin (MyS= kin) with its CSS location, and specify some window decorator ski= ns: - = - -
- = +
+ =
Resource Request Filter - - Because of JBoss Enterprise Portal Platform's Right-To-Lef= t support, all CSS files need to be retrieved through a Servlet filter and = the web application needs to be configured to activate this filter. This is= already done for 01eXoResources.war web application whi= ch contains the default skin. + = + + Because of JBoss Enterprise Portal Platform's Right-To-Left= support, all CSS files need to be retrieved through a Servlet filter and t= he web application needs to be configured to activate this filter. This is = already done for 01eXoResources.war web application whic= h contains the default skin. - - Any new web applications containing skinning CSS files wil= l need to have the following added to their web.xml : + = + + Any new web applications containing skinning CSS files will= need to have the following added to their web.xml : - = - - The <literal>display-name</literal> Element - - The display-name element will also = need to be specified in the web.xml for the skinning ser= vice to work properly with the web application. - - + + The <literal>display-name</literal> Element + = + + The display-name element will also ne= ed to be specified in the web.xml for the skinning servi= ce to work properly with the web application. + - -
- = - - - = -
- The Default Skin +
+ + = +
+ The Default Skin + = The default skin for JBoss Enterprise Portal Platform is locat= ed as part of the 01eXoResources.war. The main files ass= ociated with the skin are: - + + = - WEB-INF/gatein-resources.xml - - - For the default portal skin, this file contains de= finitions for the portal skin, the window decorations that this skin provid= es and well as defining some javascript resources which are not related to = the skin. The default portal skin doesn't directly define portlet skins, th= ese should be provided by the portlets themselves. - - - - + WEB-INF/gatein-resources.xml + = + + + For the default portal skin, this file contains defin= itions for the portal skin, the window decorations that this skin provides = and well as defining some javascript resources which are not related to the= skin. The default portal skin doesn't directly define portlet skins, these= should be provided by the portlets themselves. + + - - WEB-INF/web.xml - - - For the default portal skin, the web.xml= of the eXoResources.war will contains a lot = of information which is mostly irrelevant to the portal skinning. The area = of interest in this file is the resourcerequestfilter an= d the fact that the display-name is set. - - - - + = + + WEB-INF/web.xml + = + + + For the default portal skin, the web.xml of the eXoResources.war will contains a lot of = information which is mostly irrelevant to the portal skinning. The area of = interest in this file is the resourcerequestfilter and t= he fact that the display-name is set. + + - - skin/Stylesheet.css - - - This file is the main portal skin stylesheet. It i= s the main entry point to the CSS class definitions for the skin. The main = content points of this file are: - - - + = + + skin/Stylesheet.css + = + + + This file is the main portal skin stylesheet. It is t= he main entry point to the CSS class definitions for the skin. The main con= tent points of this file are: + + = + + = - = - - - - The skin for the main portal page. - + + + + The skin for the main portal page. + + = - - - - Skins for various portal components. - + = = - - - - Window decoration skins. - + + + Skins for various portal components. + + = - - - - The portlet specification CSS classes. - + = = - + + + Window decoration skins. + + = - + = = - - = + + + The portlet specification CSS classes. + + + + + = + + This method imports other CSS stylesheet files (some = of which may also import further CSS stylesheets) instead of defining all t= he CSS classes in this one file. Splitting the CSS classes between multiple= files allows new skins to reuse parts of the default skin. + + = + + To reuse a CSS stylesheet from the default portal ski= n you would need to reference the default skin from eXoResources. For example; to include the window decorators from the default sk= in within a new portal skin you would need to use this import: + + + + Stylesheet Merging + = - This method imports other CSS stylesheet files (so= me of which may also import further CSS stylesheets) instead of defining al= l the CSS classes in this one file. Splitting the CSS classes between multi= ple files allows new skins to reuse parts of the default skin. - - - To reuse a CSS stylesheet from the default portal = skin you would need to reference the default skin from eXoResource= s. For example; to include the window decorators from the default= skin within a new portal skin you would need to use this import: - - = - - - Stylesheet Merging - - When the portal skin is added to the page, it = merges all the CSS stylesheets into a single file. - - - - - - + When the portal skin is added to the page, it merg= es all the CSS stylesheets into a single file. + + + - - - -
- = -
- Creating New Skins + +
+ = +
+ Creating New Skins + =
Creating a New Portal Skin - - New portal skins will need to be added to the portal throu= gh the skin service. Therefore, the web application which contains the skin= s will need to be properly configured for the skin service to discover them= . This means properly configuring the ResourceRequestFilter and gatein-resources.xml. + = + + New portal skins will need to be added to the portal throug= h the skin service. Therefore, the web application which contains the skins= will need to be properly configured for the skin service to discover them.= This means properly configuring the ResourceRequestFilter and gatein-resources.xml. -
- Portal Skin Configuration - - The gatein-resources.xml will nee= d to specify the new portal skin. This will include the name of the new ski= n, where to locate its CSS stylesheet file and whether to overwrite an exis= ting portal theme with the same name. - - = + = +
+ Portal Skin Configuration + = + + The gatein-resources.xml will need = to specify the new portal skin. This will include the name of the new skin,= where to locate its CSS stylesheet file and whether to overwrite an existi= ng portal theme with the same name. + - - The default portal skin and window styles are defined = in 01eXoResources.war/WEB-INF/gatein-resources.xml. - - - CSS - - The CSS for the portal skin needs to contain the C= SS for all the window decorations and the portlet specification CSS classes. - - - - + + The default portal skin and window styles are defined in= 01eXoResources.war/WEB-INF/gatein-resources.xml. + + = + + CSS + = + + The CSS for the portal skin needs to contain the CSS = for all the window decorations and the portlet specification CSS classes. + +
- = -
- Portal Skin Preview Icon - - It is possible to see a preview of what the portal wil= l look like when selecting a new skin. This functionality relies on the cur= rent skin being updated with skin icons for all other available skins. Othe= rwise it will not be able to show the previews. - - - It is recommended that preview icons of any other skin= s are included when creating a new portal skin and that the other skins are= updated with your new portal skin preview. - - - - - - - - - - - - The portal skin preview icon is specified through the = CSS of the portal skin. In order for the current portal skin to be able to = display the preview it must specify a specific CSS class and set the icon a= s the background. - - - For a portal named MySkin in must define the following CSS class: - - = + = +
+ Portal Skin Preview Icon + = + + It is possible to see a preview of what the portal will = look like when selecting a new skin. This functionality relies on the curre= nt skin being updated with skin icons for all other available skins. Otherw= ise it will not be able to show the previews. + + = + + It is recommended that preview icons of any other skins = are included when creating a new portal skin and that the other skins are u= pdated with your new portal skin preview. + + = + + + + + = + + + + + = + + The portal skin preview icon is specified through the CS= S of the portal skin. In order for the current portal skin to be able to di= splay the preview it must specify a specific CSS class and set the icon as = the background. + + = + + For a portal named MySkin in must define the following CSS class: + - - In order for the default skin to display the skin icon= for a new portal skin, the preview screenshot needs to be placed in: 01eXoResources.war:/skin/DefaultSkin/portal/webui/component/customizat= ion/UIChangeSkinForm/background. - - - The CSS stylesheet for the default portal needs to hav= e the following updated with the preview icon CSS class. For a skin named <= emphasis role=3D"bold">MySkin then the following needs to be upd= ated: 01eXoResources.war:/skin/DefaultSkin/portal/webui/component= /customization/UIChangeSkinForm/Stylesheet.css. - - = + + In order for the default skin to display the skin icon f= or a new portal skin, the preview screenshot needs to be placed in: 01eXoResources.war:/skin/DefaultSkin/portal/webui/component/customizatio= n/UIChangeSkinForm/background. + + = + + The CSS stylesheet for the default portal needs to have = the following updated with the preview icon CSS class. For a skin named MySkin then the following needs to be updat= ed: 01eXoResources.war:/skin/DefaultSkin/portal/webui/component/c= ustomization/UIChangeSkinForm/Stylesheet.css. + -
- = - -
- = +
+ =
Creating a New Window Style - - Window styles are the CSS applied to window decorations. A= n administrator can decide which style of decoration should go around the w= indow when they add a new application or gadget to a page. + = + + Window styles are the CSS applied to window decorations. An= administrator can decide which style of decoration should go around the wi= ndow when they add a new application or gadget to a page. - - - - - - - - + = + + + + + = + + + -
- Window Style Configuration - - Window Styles are defined within a gatein-re= sources.xml file which is used by the skin service to deploy the= window style into the portal. Window styles can belong in a window style c= ategory. This category and the window styles will need to be specified in r= esources file. - - - The following gatein-resources.xml fragment will add MyThemeBlue and MyThemeRed<= /literal> to the MyTheme category. - - = + = +
+ Window Style Configuration + = + + Window Styles are defined within a gatein-reso= urces.xml file which is used by the skin service to deploy the w= indow style into the portal. Window styles can belong in a window style cat= egory. This category and the window styles will need to be specified in res= ources file. + + = + + The following gatein-resources.xml = fragment will add MyThemeBlue and MyThemeRed to the MyTheme category. + - - The windows style configuration for the default skin i= s configured in: 01eXoResources.war/WEB-INF/gatein-resources.xml<= /filename>. - - - Window Styles and Portal Skins - - When a window style is defined in gatein= -resources.xml file, it will be available to all portlets regard= less of whether the current portal skin supports the window decorator or no= t. - - - It is recommended that when a new window decorator= is added that it be added to all portal skins or that all portal skins sha= re a common stylesheet for window decorators. - - - - + + The windows style configuration for the default skin is = configured in: 01eXoResources.war/WEB-INF/gatein-resources.xml. + + = + + Window Styles and Portal Skins + = + + When a window style is defined in gatein-re= sources.xml file, it will be available to all portlets regardles= s of whether the current portal skin supports the window decorator or not. + + = + + It is recommended that when a new window decorator is= added that it be added to all portal skins or that all portal skins share = a common stylesheet for window decorators. + +
- = -
- Window Style CSS - - In order for the skin service to display the window de= corators, it must have CSS classes specifically named in relation to the wi= ndow style name. The service will try and display CSS based on this naming = convention. The CSS class must be included as part of the current portal sk= in for the window decorators to be displayed. - - - The location of the window decorator CSS classes for t= he default portal theme is located at: 01eXoResources.war/skin/Po= rtletThemes/Stylesheet.css. - - - - - - Create the CSS file: - - = + = +
+ Window Style CSS + = + + In order for the skin service to display the window deco= rators, it must have CSS classes specifically named in relation to the wind= ow style name. The service will try and display CSS based on this naming co= nvention. The CSS class must be included as part of the current portal skin= for the window decorators to be displayed. + + = + + The location of the window decorator CSS classes for the= default portal theme is located at: 01eXoResources.war/skin/Port= letThemes/Stylesheet.css. + + = + + = + + Create the CSS file: + -
- = -
- How to Set the Default Window Style - - To set the default window style to be used for a porta= l you will need to specify the CSS classes for a theme called Defa= ultTheme. - - - DefaultTheme - - You do not need to specify the DefaultThe= me in gatein-resources.xml. - - - - + = +
+ How to Set the Default Window Style + = + + To set the default window style to be used for a portal = you will need to specify the CSS classes for a theme called Defaul= tTheme. + + = + + DefaultTheme + = + + You do not need to specify the DefaultTheme<= /literal> in gatein-resources.xml. + +
- = - -
- = +
+ =
<remark>How to Create New Portlet Skins</remark> - = - - Portlets often require additional styles that may not be d= efined by the portal skin. JBoss Enterprise Portal Platform allows portlets= to define additional stylesheets for each portlet and will append the corr= esponding link tags to the head. + = + + Portlets often require additional styles that may not be de= fined by the portal skin. JBoss Enterprise Portal Platform allows portlets = to define additional stylesheets for each portlet and will append the corre= sponding link tags to the head. - - The link ID will be of the form {portletAppName= }{PortletName}. + = + + The link ID will be of the form {portletAppName}= {PortletName}. - - For example: ContentPortlet in content.war, will give id=3D"contentContentP= ortlet". + = + + For example: ContentPortlet in = content.war, will give id=3D"contentContentPo= rtlet". - - To define a new CSS file to include whenever a portlet is = available on a portal page, the following fragment needs to be added in gatein-resources.xml. + = + + To define a new CSS file to include whenever a portlet is a= vailable on a portal page, the following fragment needs to be added in gatein-resources.xml. - = - - This will load the DefaultStylesheet.css when the Default skin is used and the OtherSkinStylesheet.css when the OtherSkin is used. + + This will load the DefaultStylesheet.css= when the Default skin is used and the OtherSkinStylesheet.css when the OtherSkin is used. - - Updating Portlet Skins - - If the current portal skin is not defined as one of th= e supported skins, then the portlet CSS class will not be loaded. It is rec= ommended that portlet skins are updated whenever a new portal skin is creat= ed. - - + = + + Updating Portlet Skins + = + + If the current portal skin is not defined as one of the = supported skins, then the portlet CSS class will not be loaded. It is recom= mended that portlet skins are updated whenever a new portal skin is created. + + =
- <remark>Define a Custom CSS File</remark> - - - JBoss Enterprise Portal Platform &VX; does not serve C= SS files directly, but uses a filter as well as a skin service in order to: - - - - - Cache the CSS files. - - - - - Merge them into one file if possible. This wil= l be discussed further in . - - - - - Add support for Right-To-Left (RTL) languages.= This is discussed in more detail in . - - - - - This causes JBoss Enterprise Portal Platform to create= non-functioning a CSS-link in html-src-code. - - - To Resolve This: - - - Add the following files to the custom port= let application: - - - - - WEB-INF/gatein-resourc= es.xml: - + <remark>Define a Custom CSS File</remark> + = + + JBoss Enterprise Portal Platform &VX; does not serve CSS= files directly, but uses a filter as well as a skin service in order to: + + = + + + + Cache the CSS files. + + + = + + + Merge them into one file if possible. This will be= discussed further in . + + + = + + + Add support for Right-To-Left (RTL) languages. Thi= s is discussed in more detail in . + + + + = + + This causes JBoss Enterprise Portal Platform to create n= on-functioning a CSS-link in html-src-code. + + = + + To Resolve This: + = + + + Add the following files to the custom portlet appl= ication: + + = + + + = + + WEB-INF/gatein-resources.xml: + = + custom test @@ -519,26 +545,30 @@ /css/main.css ]]> - - Note: - - - - The value of t= he application-name element needs to match the value= of the display-name element in web.xml. - - - - - The value of t= he portlet-name element needs to match the value of = the portlet-name element in portlet.xml. - - - - + + Note: + = + + + + The value of the appl= ication-name element needs to match the value of the display-name element in web.xml. + - - - WEB-INF/web.xml= : + = + + The value of the port= let-name element needs to match the value of the por= tlet-name element in portlet.xml. + + + + + + + = + + WEB-INF/web.xml: + = + custom = @@ -551,40 +581,46 @@ /* ]]> - - Note: - - - - The value of t= he display-name element needs to match the value of = the application-name element in gatein-res= ources.xml. - - - - - The R= esourceRequestFilter needs to be added to the custom portlet appl= ication for proper CSS file handling within the Portal container. - - - - + + Note: + = + + + + The value of the disp= lay-name element needs to match the value of the app= lication-name element in gatein-resources.xml. + - - - WEB-INF/portlet.xml: + = + + The ResourceRequestFilt= er needs to be added to the custom portlet application for proper= CSS file handling within the Portal container. + + + + + + + = + + WEB-INF/portlet.xml:= + = + test ]]> - - Note: - - The value of the portlet-name element needs to match the value of the portlet-name element in gatein-resources.xml. - - - - - - - The final portlet application will be structur= ed as illustrated below: - + + Note: + = + + The value of the portlet-na= me element needs to match the value of the portlet-n= ame element in gatein-resources.xml. + + + + + + = + + The final portlet application will be structured a= s illustrated below: + custom.war =E2=94=9C=E2=94=80=E2=94=80 css =E2=94=82 =E2=94=94=E2=94=80=E2=94=80 main.css @@ -595,139 +631,134 @@ =E2=94=9C=E2=94=80=E2=94=80 portlet.xml =E2=94=94=E2=94=80=E2=94=80 web.xml - - + +
- = -
- Change Portlet Icons - - Each portlet can be registered by a unique icon in the= portlet registry or page editor. This icon can be changed by adding an ima= ge to the directory of the portlet web application: - - - - - skin/DefaultSkin/portletIcons/portlet_name.png . - - - - - - - To be used correctly the icon must be named after the = portlet. - - - For example; the icon for an account portlet named AccountPortlet would be located at: - - - - - skin/DefaultSkin/portletIcons/Accoun= tPortlet.png - - - - - - - Portlet Icons Directory + = +
+ Change Portlet Icons + = + + Each portlet can be registered by a unique icon in the p= ortlet registry or page editor. This icon can be changed by adding an image= to the directory of the portlet web application: + + = + + - You must use skin/DefaultSkin/portletIcon= s/ for the directory to store the portlet icon regardless of what= skin is going to be used. - - - - + skin/DefaultSkin/portletIcons/portlet_name.png . + + + + = + + To be used correctly the icon must be named after the po= rtlet. + + = + + For example; the icon for an account portlet named AccountPortlet would be located at: + + = + + + + skin/DefaultSkin/portletIcons/AccountPor= tlet.png + + + + = + + Portlet Icons Directory + = + + You must use skin/DefaultSkin/portletIcons/<= /literal> for the directory to store the portlet icon regardless of what sk= in is going to be used. + +
- = - -
- = +
+ =
Create New Portlet Specification CSS Classes - - The portlet specification defines a set of default CSS cla= sses that should be available for portlets. These classes are included as p= art of the portal skin. Please see the portlet specification for a list of = the default classes that should be available. + = + + The portlet specification defines a set of default CSS clas= ses that should be available for portlets. These classes are included as pa= rt of the portal skin. Please see the portlet specification for a list of t= he default classes that should be available. - - For the default portal skin, the portlet specification CSS= classes are defined in: 01eXoResources.war/skin/Portlet/Styleshe= et.css. + = + + For the default portal skin, the portlet specification CSS = classes are defined in: 01eXoResources.war/skin/Portlet/Styleshee= t.css. - -
- = - -
- = -
- Tips and Tricks +
+
+ = +
+ Tips and Tricks + =
Easier CSS Debugging - - By default, CSS files are cached and their imports are mer= ged into a single CSS file at the server side. This reduces the number of H= TTP requests from the browser to the server. + = + + By default, CSS files are cached and their imports are merg= ed into a single CSS file at the server side. This reduces the number of HT= TP requests from the browser to the server. - - The optimization code is quite simple as all the CSS files= are parsed at the server start and all the @import and = url(...) references are rewritten to support a single fl= at file. The result is stored in a cache directly used from the Re= sourceRequestFilter. + = + + The optimization code is quite simple as all the CSS files = are parsed at the server start and all the @import and <= literal>url(...) references are rewritten to support a single fla= t file. The result is stored in a cache directly used from the Res= ourceRequestFilter. - - Although the optimization is useful for a production envir= onment, it may be easier to deactivate this optimization while debugging st= ylesheets. Set the java system property exo.product.developing to true to disable the optimization. + = + + Although the optimization is useful for a production enviro= nment, it may be easier to deactivate this optimization while debugging sty= lesheets. Set the java system property exo.product.developing to true to disable the optimization. - - For example, the property can be passed as a JVM parameter= with -D option when running JBoss Enterprise Portal Pla= tform. + = + + For example, the property can be passed as a JVM parameter = with -D option when running JBoss Enterprise Portal Plat= form. - = sh jboss-as/bin/run.sh -Dexo.product.developing= =3Dtrue - - - This option may cause display bugs in some browsers. - - + + + + This option may cause display bugs in some browsers. + - -
- = +
+ =
Some CSS Techniques - - It is recommended that users have some experience with CSS= before studying JBoss Enterprise Portal Platform CSS. + = + + It is recommended that users have some experience with CSS = before studying JBoss Enterprise Portal Platform CSS. - - JBoss Enterprise Portal Platform relies heavily on CSS to = create the layout and effects for the UI. Some common techniques for custom= izing JBoss Enterprise Portal Platform CSS are explained below. + = + + JBoss Enterprise Portal Platform relies heavily on CSS to c= reate the layout and effects for the UI. Some common techniques for customi= zing JBoss Enterprise Portal Platform CSS are explained below. -
- Border Pattern - - The decorator is a pattern to create a contour or a cu= rve around an area. In order to achieve this effect you need to create nine= cells. The BODY is the central area that you want to de= corate. The other eight cells are distributed around the BODY cell. You can use the width, height and background image properties t= o achieve any decoration effect that you want. - - - - - - - - = + = +
+ Border Pattern + = + + The decorator is a pattern to create a contour or a curv= e around an area. In order to achieve this effect you need to create nine c= ells. The BODY is the central area that you want to deco= rate. The other eight cells are distributed around the BODY cell. You can use the width, height and background image properties to = achieve any decoration effect that you want. + + = + + + + + -
- = -
- Left Margin Left Pattern - - Left margin left pattern is a technique to create two = blocks side by side. The left block will have a fixed size and the right bl= ock will take the rest of the available space. When the user resizes the br= owser the added or removed space will be taken from the right block. - - - - - - - - = + = +
+ Left Margin Left Pattern + = + + Left margin left pattern is a technique to create two bl= ocks side by side. The left block will have a fixed size and the right bloc= k will take the rest of the available space. When the user resizes the brow= ser the added or removed space will be taken from the right block. + + = + + + + + -
- = - -
- = - -
- = - - - +
+
+ --===============8904317545999207121==--