topic Re: Editing Banner in Sample Flex Viewer in ArcGIS API for Flex Questions

Editing Banner in Sample Flex Viewer

SandeepTalasila — Wed, 16 Jun 2010 16:10:56 GMT

I want to edit the banner of the sample flex viewer, I would like to show the sub title in two lines, instead of one line. Because the width of the banner is increasing if my subtitle is too long. I have tried line breaks used in XML but it didn't work. I also tried adding two subtitles, but still I cannot get to the result. Please let me know any ideas.

Thanks,
Sandeep.

Re: Editing Banner in Sample Flex Viewer

RobertScheitlin__GISP — Wed, 16 Jun 2010 17:01:42 GMT

Sandeep,

All you have to do is change this line in the Banner.mxml

<mx:Label styleName="BannerSubtitle" text="{subtitle}"/>

to this one

<mx:Text styleName="BannerSubtitle" htmlText="{subtitle}"/>

and in the config.xml use a line like this for the subtitle

<subtitle>Powered by ArcGIS Server Powered by ArcGIS Server Powered by ArcGIS Server&lt;br/&gt;Powered by ArcGIS Server Powered by ArcGIS Server</subtitle>

The important part is

&lt;br/&gt;

for the line return

Re: Editing Banner in Sample Flex Viewer

SandeepTalasila — Wed, 16 Jun 2010 17:37:43 GMT

Thanks Robert, It worked. But it is creating an unusual spacing between both lines (see image) and i was not able to figure where to adjust the line spacing.

Re: Editing Banner in Sample Flex Viewer

RobertScheitlin__GISP — Wed, 16 Jun 2010 17:50:28 GMT

Sandeep,

Please attach your <subtitle> from your config.xml. Also look at your BannerSubtitle css style in your style shhet.

Re: Editing Banner in Sample Flex Viewer

SandeepTalasila — Wed, 16 Jun 2010 18:13:40 GMT

Robert,
Thanks for the reply, here is my code

<subtitle>Public School Projects in USA<br/>Click on the tools below to access</subtitle>

CSS Code: I have included 'line-height' in the code but still the result is same

.BannerSubtitle
{
fontFamily: Arial;
fontSize: 12;
fontWeight: bold;
color: #FFFFFF;
line-height: 0;
}

Thanks,

Re: Editing Banner in Sample Flex Viewer

RobertScheitlin__GISP — Wed, 16 Jun 2010 18:35:48 GMT

Sandeep,

Strange all of that is fine... Must be somewhere in your banner.mxml.

Try pasting your banner.mxml code. Be sure to use the # button in the toolbar to wrap your code in the proper code block.

Re: Editing Banner in Sample Flex Viewer

SandeepTalasila — Sun, 12 Dec 2021 08:05:29 GMT

Here is banner.mxml code

<?xml version="1.0" encoding="utf-8"?>
<!--
////////////////////////////////////////////////////////////////////////////////
//
// Copyright © 2008 - 2009 ESRI
//
// All rights reserved under the copyright laws of the United States.
// You may freely redistribute and use this software, with or
// without modification, provided you include the original copyright
// and use restrictions.  See use restrictions in the file:
// <install location>/FlexViewer/License.txt
//
////////////////////////////////////////////////////////////////////////////////
-->
<mx:Canvas xmlns:mx ="http://www.adobe.com/2006/mxml" 
   styleName ="BannerCanvas" 
   minWidth ="500" 
   minHeight ="70">

 <mx:Script>
  <![CDATA[
  
            import mx.resources.ResourceBundle;
               
   private var _logo:String;
   
   /**
    * The logo that is used to brand the application at the controller area.
    * 
    * @param value the relative URL points to the logo image file.
    */
   public function set logo(value:String):void
   {
    _logo = value;
    if (value != "")
    {
     imgLogo.visible = true;
     imgLogo.includeInLayout = true;
    }
    else
    {
     imgLogo.visible = false;
     imgLogo.includeInLayout = false;
    }
   }
     
   /**
    * @private
    */
   [Bindable]
   public function get logo():String
   {
    return _logo;
   }
   
   /**
    * The title displayed in the banner.
    */
   [Bindable]
   public var title:String;
   
   /**
    * The subtitle displayed in the banner.
    */ 
   [Bindable]
   public var subtitle:String;
   
   /**
    * The current/activated tool status displayed in the banner.
    */  
    [Bindable]
   [Bindable]
   public var status:String;    
   
   private function nlsString(nlsToken:String):String
   {
    return resourceManager.getString('ControllerStrings', nlsToken);
   }
   
  ]]>
 </mx:Script>
 
 
    <mx:Metadata>
        [ResourceBundle("ControllerStrings")]
    </mx:Metadata> 
    

 <mx:VBox width="100%" height="100%" verticalGap="0">
  <mx:Spacer height="5"/>
  <mx:HBox width="100%" horizontalGap="0" verticalAlign="middle">
   <mx:Spacer width="10" />
   <mx:Image id="imgLogo" 
      source="{logo}" 
      maintainAspectRatio="true" 
      maxHeight="50" 
      maxWidth="70" 
      horizontalAlign="left" 
      verticalAlign="top" 
      visible="false" 
      includeInLayout="false"/>
   <mx:Spacer width="5" />
   <mx:VBox verticalGap="0" horizontalAlign="left" width="100%">
    <mx:Label styleName="BannerTitle" text="{title}"/>
    <mx:HRule styleName="BannerRule" width="100%" />
    <mx:HBox width="100%" verticalAlign="top">
     <mx:Text styleName="BannerSubtitle" htmlText="{subtitle}"/>
     <mx:HBox width="100%" horizontalAlign="right">
      <mx:Label styleName="BannerStatus" text="{nlsString('current_action') + status}"/>
     </mx:HBox>
    </mx:HBox>
   </mx:VBox>
   <mx:Spacer width="10" />
  </mx:HBox>
  <mx:Spacer height="15"/>
 </mx:VBox>
 
</mx:Canvas>

Thanks,

Re: Editing Banner in Sample Flex Viewer

RobertScheitlin__GISP — Wed, 16 Jun 2010 19:13:23 GMT

Sandeep,

OK, so the issue is in your subtitle

Make sure your config.xml does not have

<subtitle>Public School Projects in USA<br/>Click on the tools below to access</subtitle>

it should have

<subtitle>Public School Projects in USA&lt;br/&gt;Click on the tools below to access</subtitle>

Re: Editing Banner in Sample Flex Viewer

SandeepTalasila — Wed, 16 Jun 2010 19:20:12 GMT

Thanks Robert, it worked. I am sorry that i ignored what you said in the first response.

Re: Editing Banner in Sample Flex Viewer

TristanKnowlton — Tue, 22 Jun 2010 18:27:52 GMT

Can someone help me figure out how to extend the banner across the screen so that it is 100% the width of the page?

Thanks!

Re: Editing Banner in Sample Flex Viewer

RobertScheitlin__GISP — Tue, 22 Jun 2010 18:51:08 GMT

Darryl,

You have to set the width of both the banner.mxml and the controller.mxml

1. in the index.mxml change the existing line to this one

<controller><Controller id="control" left="20" top="20" right="30" width="100%"/></controller>

2. in the Banner.mxml add

width  ="100%"

to the top canvas.

Re: Editing Banner in Sample Flex Viewer

IanParfitt — Sun, 12 Dec 2021 08:05:32 GMT

Hi
I'm trying to use parameters from the URL to populate the subtitle string. I have a getURLParameters function which I use in MapManager.mxml (see below) but don't know how to call this in Banner.mxml to redefine the subtitle string. I guess I need to add this function to Banner.mxml and write another function that calls it? Any help would be much appreciated

Thanks

Ian

            private function getURLParameters():Object
            {
                var result:URLVariables = new URLVariables();

                try
                {
                    if (ExternalInterface.available)
                    {
                        // See http://livedocs.adobe.com/flex/3/langref/flash/external/ExternalInterface.html
                        var search:String = ExternalInterface.call("location.search.substring", 1);
                        if (search && search.length > 0)
                        {
                            result.decode(search);
                        }
                    }
                }
                catch (error:Error)
                {
                    Alert.show(error.toString());
                }

                return result;
            }

Re: Editing Banner in Sample Flex Viewer

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:05:35 GMT

Ian,

You can actually do it all in the MapManager.mxml in the mapLoadComplete function.

I have setup the url parameter as "sTitle" so it would look like (http://gislap134/flexviewer/index.html?sTitle=hi%20world).

private function mapLoadComplete(event:MapEvent):void
      {
       SiteContainer.dispatchEvent(new AppEvent(AppEvent.LAYER_LOADED, false, false, null));
       
                try
                {
                    if (ExternalInterface.available)
                    {
                     var result:URLVariables = new URLVariables();
                        // See http://livedocs.adobe.com/flex/3/langref/flash/external/ExternalInterface.html
                        var search:String = ExternalInterface.call("location.search.substring", 1);
                        if (search && search.length > 0 && search != "debug=true")
                        {
                         result.decode(search);
                         var xUrlParam:String;
                         if (result["sTitle"]){
        xUrlParam = result.sTitle; 
                             SiteContainer.getInstance().controller.banner.subtitle = xUrlParam;
                          } 
                        }
                    }
                }
                catch (error:Error){}
            }

Re: Editing Banner in Sample Flex Viewer

IanParfitt — Fri, 25 Jun 2010 21:54:29 GMT

Thanks Robert, that is just what I needed - changed your param variable to mine and it worked first try! Sending you a virtual cerveza, have a great weekend.

Ian

Re: Editing Banner in Sample Flex Viewer

TristanKnowlton — Mon, 28 Jun 2010 14:39:01 GMT

Thanks Robert for the tip change the banner width to 100% of page.

Greatly appreciated!!

Re: Editing Banner in Sample Flex Viewer

JustinFultz — Wed, 12 Jan 2011 15:28:38 GMT

I have been unsuccessful at changing the subtitle color in the default.css file.

I have tried the following:

color: #FF0000;
color: 0#FF0000;
color: red;
fontColor: #FF0000;
fontColor: 0#FF0000;
fontColor: red;

Anyone have any other suggestions?

Re: Editing Banner in Sample Flex Viewer

KeithBornhorst — Sun, 12 Dec 2021 08:05:38 GMT

Your default.css additions...

.BannerSubtitle
{
 color:#ff0000;
}

... are being overriden by code in UIManager that sets the subtitle color to the title color.

// UIManager.as ~line 203
var cssStyleDeclarationBannerSubtitle:CSSStyleDeclaration = new CSSStyleDeclaration(".BannerSubtitle");
if (numberOfStyleColors > 4)
{
     cssStyleDeclarationBannerSubtitle.setStyle("color", titleColor);
}
topLevelStyleManager.setStyleDeclaration(".BannerSubtitle", cssStyleDeclarationBannerSubtitle, false);

Comment that out and your subtitle should take whatever stylings are assigned to it in default.css.

Cheers,
K

Re: Editing Banner in Sample Flex Viewer

JustinFultz — Wed, 12 Jan 2011 16:01:28 GMT

Perfect! Thanks!