nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

PopUps

philippschnetzer

I have moved over my 2.2 app to 2.3. I am using the QueryTool to display some traffic cameras and other static images and simply copied over the entire code from the 2.2 query tool and pasted it into the 2.3 version. I did this because I want the query tool to still utilize the old InfoPopUp because I have that specifically configured. Things work as expected - except that when the query is run the first time and a resulting icon is clicked on the map nothing shows in the InfoPopUp - but as soon you click on another point everything works as it did in 2.2. There is some sort of conflict in there for the first time a point is clicked. Should I just try to drop the InfoPopUp and try to make this work with the new popup or is this perhaps just a simple line of code missing preventing the first click from showing any results?

Thank you for any help!

タグ付けされた投稿をもっと見る

Accepted answers

All comments

RobertScheitlin__GISP

Terry,

You can not take the exported project files and re-import them into Flash Builder as a project (because once exported as a release build you are not dealing with the source code anymore, you are now dealing with a compiled viewer).

TerryHiggins

I am trying to recreate this process stpe by step however now when I setup my FB I don't have a default css file. Any suggestions on where to identify why this would not be created? I took the ArcGIS Viewer for flex application and used the export option to export my file to my local PC and then brought that into the FB but no default css file shows up in the default src folder.

Thanks in advance,
Terry

TerryHiggins

Terry,

I am not real sure where you are going wrong then. I have done these steps (even naming my "MyPopupRendererSkin.mxml" just like yours) and I have no problem seeing the changes, to include the rectangle being removed. Here is my whole MyPopUpMediaBrowserSkin.mxml

Thank you - thank you - thank you
I finally have this working. Without your providing me the file you did I seriously doubt I would have found the issue. The problem was in line 50 (note this is not a line that I altered previously) - in my code it was:
private static const symbols:Array = [ "borderRecSymbol" ];

Your code:
private static const symbols:Array = [ ];

I can't express enough how much I appreciate your kindness and willingness to assist me in this. You have been extrememly helpful. I only hope some day I will be able to gain enough knowledge to assist someone else as you have assisted me.

Now to deploy this to my server I believe you provided some insight on that process - I will have to review the posting.

RobertScheitlin__GISP

Terry,

I am not real sure where you are going wrong then. I have done these steps (even naming my "MyPopupRendererSkin.mxml" just like yours) and I have no problem seeing the changes, to include the rectangle being removed. Here is my whole MyPopUpMediaBrowserSkin.mxml

MyPopUpMediaBrowserSkin.zip

Example1.PNG

TerryHiggins

Terry,

Hmm... You can undue that.
You are not replacing the actual PopUpMediaBrowser component. You are just updating the skinClass.

You can undue that as well as they way the component knows to use your customized skin is through you setting the skinClass attribute.

It looks like your issue is actually in this code:
<supportClasses:PopUpMediaBrowser id="mediaBrowser"
height="270"
width="100%"
skinClass="com.esri.viewer.skins.supportClasses.MyPopUpMediaBrowser"/>
that should be:
<supportClasses:PopUpMediaBrowser id="mediaBrowser"
height="270"
width="100%"
skinClass="com.esri.viewer.skins.supportClasses.MyPopUpMediaBrowserSkin"/>

Robert,
Actually I had this code as you described previously with the same end result. I went in and removed the items you stated were not required and set the code back as you described. I have the same result occurs as before the changes to the rect have no affect on my results. This is so baffling to me.

RobertScheitlin__GISP

Terry,

Hmm...

I also added the import in the fx Script block
import com.esri.viewer.skins.supporClasses.MyPopUpMediaBrowserSkin;

You can undue that.
You are not replacing the actual PopUpMediaBrowser component. You are just updating the skinClass.

And in the default.css I entered
esri|PopUpMediaBrowser
{
skinClass:ClassReference("com.esri.viewer.skins.supportClasses.MyPopUpMediaBrowser");
}

You can undue that as well as they way the component knows to use your customized skin is through you setting the skinClass attribute.

It looks like your issue is actually in this code:

<supportClasses:PopUpMediaBrowser id="mediaBrowser"
height="270"
width="100%"
skinClass="com.esri.viewer.skins.supportClasses.MyPopUpMediaBrowser"/>

that should be:

<supportClasses:PopUpMediaBrowser id="mediaBrowser"
height="270"
width="100%"
skinClass="com.esri.viewer.skins.supportClasses.MyPopUpMediaBrowserSkin"/>

TerryHiggins

Terry,

What is your PopUpMediaBrowserSkin.mxml called and where did you place it? Your MyPopUpRenderSkin.mxml needs to point to your PopUpMediaBrowserSkin.mxml using the skinClass attribute.

My PopUpMediaBrowserSkin.mxml is named MyPopUpMediaBrowserSkin.mxml and it is located in the com.esri.viewer.skins.supportClasses package.

When you state "your MyPopUpRendererSkin.mxml" needs to point to your PopUpMediaBrowserSkin.mxml I presume the skinClass attribute is within the fx Declarations? under

<supportClasses:PopUpMediaBrowser id="mediaBrowser"
height="270"
width="100%"
skinClass="com.esri.viewer.skins.supportClasses.MyPopUpMediaBrowser"/>

I also added the import in the fx Script block
import com.esri.viewer.skins.supporClasses.MyPopUpMediaBrowserSkin;

And in the default.css I entered
esri|PopUpMediaBrowser
{
skinClass:ClassReference("com.esri.viewer.skins.supportClasses.MyPopUpMediaBrowser");
}

esri|PopUpRenderer
{
skinClass:ClassReference("com.esri.viewer.skins.MyPopupRendererSkin");
}

I really thought I had thoroughly read all the posts and suggestions and applied them correctly. I appoligize for being so dense on this - I am really trying to learn.

I did notice that I named my copy of the PopUpRendererSkin - MyPopupRendererSkin - the fact I didn't capitalize the u in Popup wouldn't be causing this issue would it? Since this is my copy I presume it basically could be named anything.

The Host Component was left alone with the fx:Metadata tag to the
[HostComponent("com.esri.ags.portal.PopUpRenderer")]

Terry

RobertScheitlin__GISP

Terry,

What is your PopUpMediaBrowserSkin.mxml called and where did you place it? Your MyPopUpRenderSkin.mxml needs to point to your PopUpMediaBrowserSkin.mxml using the skinClass attribute.

TerryHiggins

Terry,

For removing the border from the image you need to foloow this thread:

http://forums.arcgis.com/threads/38375-Change-media-container-size-in-Pop-Up-Window

I have tried to follow that link - when I run the project in debug at the point when I click on the feature to obtain the popup I receive a type error - error #1009 Cannot access a property or method of a null object reference.
The line of code this error refers to reads:
var attributes:Object = hostComponent.attributes;

any suggestion on how to resolve this?
Terry

RobertScheitlin__GISP

Terry,

For removing the border from the image you need to foloow this thread:

http://forums.arcgis.com/threads/38375-Change-media-container-size-in-Pop-Up-Window

TerryHiggins

Thanks Robert - I do realize the importance of case and will go back through every step and try to identify my mistakes. Thanks for all your assistance in this.

Robert - I went back through my project focusing only on the MyPopupRendererSkin.mxml and realized that the chnages I make to this are being reflected in my map. When I edit this section -
<supportClasses:PopUpMediaBrowser id="mediaBrowser"
                                          height="270"
      width="100%"
                                          skinClass="com.esri.ags.skins.supportClasses.PopUpMediaBrowserSkin"/>

In regards to the height property it changes the height of the container that my image is within. So now I am wondering if the PopUpMediaBrowserSkin is actually the skin that affects the white border that surrounds my image, as it apears any changes I make to it are not reflected.
Can you confirm that is the skin that affects the border that surrounds an image that appears when you click on a feature? If that is the skin do I need to also change the line shown about to reflect the new name of the copied skin or does this line in the PopUpMediaBrowser remain unchanged?
Thanks again for all your time and assistance on this.

TerryHiggins

Terry,

It is pretty hard for me to know where things have went wrong for you. The only thing I can do is suggest you review each step and see if you missed something. You need to keep in mind that flex is a CaSe sensitive language so if your paths are off even by the case of one letter, that is no good.

Thanks Robert - I do realize the importance of case and will go back through every step and try to identify my mistakes. Thanks for all your assistance in this.

RobertScheitlin__GISP

Terry,

It is pretty hard for me to know where things have went wrong for you. The only thing I can do is suggest you review each step and see if you missed something. You need to keep in mind that flex is a CaSe sensitive language so if your paths are off even by the case of one letter, that is no good.

TerryHiggins

Terry,

I think that is normal as the Flex API is NOT open source.

Evidently I have still done something incorrectly or misunderstood something along the way as the changes I have made do not reflect within my map. I thought the issue I noted previously was the cause. Any additional input to assist me in this would be greatly appreciated.
Thanks

RobertScheitlin__GISP

Terry,

I think that is normal as the Flex API is NOT open source.

TerryHiggins

Thanks I am feeling so much better about this - you have been so kind to provide me with detailed guidance. In reading the posts again it appears the file I need to make the change to however is the PopUpMediaBrowser. I tried applying the same logic you have guided me through but substituting MyPopUpMediaBrowser in place of the MyPopUpRendererSkin without success.
I am having difficulties with locating the Host component.

I managed somehow to get a copy of the PopUpMediaBrowserSkin.mxml into my project and so I moved it to the supportClasses folder.
I attempted to add it to the defaults.css however that produced a warning the
"Cannot resolve namespace qualified type "PopUpMediaBrowser' in CSS selector . . ."

I attempted to remove the code I added, resave the file but I'm still getting these warnings even thought the code it is referencing is not in my project?
I did a clean on the project and it appears that warning has cleared but I'm back to not having the PopUpMediaBroswer added to the css file. When I enter in the esri| and attempt to browse to the PopUpMediaBrowser it is not an option to select.

I'm thinking I need to add a name space but not clear if that is correct or not. Still learning.

Well reveiwing posts and the work I have completed so far to see if I could identify my own solution I did notice something else that I believe is not functioning correctly. When I use the control key and hover over the ersi|PopUpRenderer in the default.css file I receive a code navigation error - source could not be found for com.esri.ags.portal.PopUpRenderer in . . .[ATTACH=CONFIG]33565[/ATTACH]

CodeError.png

Capture3.PNG

TerryHiggins

Terry,

Once you have made the popup changes discussed earlier than you go to the Project menu and choose "Export release build" and that will create bin-release folder with all the compiled code can the contents of that folder is what you copy over to the web server.

Thanks I am feeling so much better about this - you have been so kind to provide me with detailed guidance. In reading the posts again it appears the file I need to make the change to however is the PopUpMediaBrowser. I tried applying the same logic you have guided me through but substituting MyPopUpMediaBrowser in place of the MyPopUpRendererSkin without success.
I am having difficulties with locating the Host component.

I managed somehow to get a copy of the PopUpMediaBrowserSkin.mxml into my project and so I moved it to the supportClasses folder.
I attempted to add it to the defaults.css however that produced a warning the
"Cannot resolve namespace qualified type "PopUpMediaBrowser' in CSS selector . . ."

I attempted to remove the code I added, resave the file but I'm still getting these warnings even thought the code it is referencing is not in my project?
I did a clean on the project and it appears that warning has cleared but I'm back to not having the PopUpMediaBroswer added to the css file. When I enter in the esri| and attempt to browse to the PopUpMediaBrowser it is not an option to select.

I'm thinking I need to add a name space but not clear if that is correct or not. Still learning.

RobertScheitlin__GISP

Terry,

Once you have made the popup changes discussed earlier than you go to the Project menu and choose "Export release build" and that will create bin-release folder with all the compiled code can the contents of that folder is what you copy over to the web server.

TerryHiggins

Terry,

Your steps for importing the source code to start fresh sounds good except that you are missing the part of the readme.txt from the down load that states that the viewer source code does not contain the Flex API SWC so you have to manually add it to the libs folder of your new project to get rid of all those errors. XMLs does not mean source code MXMLs and .as mean that you are dealing with the sources code.

Thanks Robert - I didn't go to the next step because I wasn't expecting errors mid-point in the process. I have completed adding the Flex API SWC and as you stated all the errors are gone. Now I have a clean slate. Earlier in the post you stated all I would need to do is overwrite the default XMLs in this new workspace.

If I am correct then I would copy and paste from my project folder on the server that contains our functioning Web Page the following:

1. config.xml

I have a popups folder in the funtioning Web Page so I presume I would copy all those popups and place them in the popups package created in this clean install - correct?
I also presume to delete all the sample XMLs in that folder? Or in reality do this not affect the end result?

Under various Widget folders we have XML files that were created - if I am understanding this correctly then I would simply copy and paste the XMLs from our Widgets subfolders to the corresponding Widget subfolder on this clean install.

If I am correct to this point and then proceed to make the change as you described earlier to the MyPopupRendererSkin.mxml and the defaults.css file, compile, no errors then which components from the FB do I copy back to my server folder with the functioning Web Page?

RobertScheitlin__GISP

Terry,

Your steps for importing the source code to start fresh sounds good except that you are missing the part of the readme.txt from the down load that states that the viewer source code does not contain the Flex API SWC so you have to manually add it to the libs folder of your new project to get rid of all those errors. XMLs does not mean source code MXMLs and .as mean that you are dealing with the sources code.

TerryHiggins

Terry,

So it sounds to me like you are starting with a compiled viewer that has just been configured and you are not starting with the viewers source code as your starting point and that is an issue. You can start with a compiled version of the viewer it is just more complicated. So the way to tell if you are beginning with a compiled viewer or not is do you have access to the actual mxml files for your site. If you are only dealing with swfs than your are just using the compiled version and the only thing you have done is configure the viewers XML files to suit your needs. To what you want you have to start with the actual viewer source code downloaded from the Github site. You can then just overwrite all the default XML files (that come with the source code) with your own XML files and then you will be at a good starting point for your manipulation of the popup.

Robert - I have XML files in my folder so I believe I am dealing with the source code version. To be honest at this point I think I have everything so out of sync that I think I need to start with a clean slate so to speak. I'm wondering if I'm even setting this thing up correctly at this point. Steps I took:
1. downloaded the arcgis-viewer-flex-3.6-src file
2. Started FB - Import Flash Builder Project
3. Import project select file and browsed to the zip version of the above mention file
4. Import method - extract new copy of project to - location on my personal PC <finish>
5. This results in 87 errors . . basically type was not found or was not a compile time constatn . .
Guess at this point I have something totally out of wack - I went back to the original download site and downloaded again - same results - obviously user error but I don't know what I'm doing wrong.

RobertScheitlin__GISP

Terry,

So it sounds to me like you are starting with a compiled viewer that has just been configured and you are not starting with the viewers source code as your starting point and that is an issue. You can start with a compiled version of the viewer it is just more complicated. So the way to tell if you are beginning with a compiled viewer or not is do you have access to the actual mxml files for your site. If you are only dealing with swfs than your are just using the compiled version and the only thing you have done is configure the viewers XML files to suit your needs. To what you want you have to start with the actual viewer source code downloaded from the Github site. You can then just overwrite all the default XML files (that come with the source code) with your own XML files and then you will be at a good starting point for your manipulation of the popup.

TerryHiggins

First let me say I really appreciate your response. The instructions you provided are excellent in regards to being detail for a beginner - but evidently my problem starts with not having Flash builder setup correctly as your instructions do not correspond to what I see. We are on ArcGIS ver 10.1, Using FB 4.6, Created the base project using the ArcGIS for Flex View App 4.6 - this is residing on our server so I created a zip of this file.
In Flash Builder (FB)
1. File Import Flash builder Project
2. Import project as file
3. Browsed to the location of the zipped project
4. Import method chose - Import new copy of project and extracted it to my local PC
5. When I expand the libs folder (step 4) there is only a Link Type:Merged into Code
6. I did an Add SWC browsed to the location with the swc (your step 5)
7. Did step 6 Browsed to the src folder in the unzipped API (step 7)
8. closed the properties window
9. Expanded the skins folder and did a right click New ? MXML skin and named it as instructed
10. My default package does not have a default.css

Can you set me on the right track here.
Also please note for reasons I haven't figured out yet I am not receiving any notifications when you responded to my post and I wasn't able to locate this using advanced search criteria and my name.

I feel confident you can get me started on the right track and I do so much appreciate it.

My error on Flex we are using 3.6

TerryHiggins

Terry,

Here is step by step instructions:

1. Download the ArcGIS API for Flex - http://www.esri.com/apps/products/download/index.cfm?fuseaction=download.main&downloadid=1184
2. Unzip this to your local machine.
3. In your ArcGIS Viewer for Flex project. Right clcik the project in the package explorer, and choose properties.
4. Click the Flex Build Path (in the left window), in the Build path libraries (right window) expand the libs folder.
5. Expand the agslib-3.6-2013-12-13.swc
6. Select "Source attachment" and then clcik the edit button.
7. Browse to the location your unzipped the API to and select the src folder (i.e. C:\Flex Stuff\arcgis_api_for_flex_3_6\ArcGIS_Flex\src).
8. Close out the properties window and the project should rebuild.
9. Expand the FlexViewer3.6/src/com/esri/viewer/skins/ folder and right click the skins folder and choose new > MXML Skin.
10. Name it (i.e. MyPopupRendererSkin).
11. Host component = com.esri.ags.portal.PopUpRenderer
12. Change nothing else, and clcik finish.
13. Make your changes to the MyPopupRendererSkin.mxml.
14. Expand the (default package) folder and choose defaults.css
15. Add this:
esri|PopUpRenderer
    {
        skinClass:ClassReference('com.esri.viewer.skins.MyPopupRendererSkin');
    }
15. launch project in run or debug mode and you should now be using your modified popuprendererskin.

First let me say I really appreciate your response. The instructions you provided are excellent in regards to being detail for a beginner - but evidently my problem starts with not having Flash builder setup correctly as your instructions do not correspond to what I see. We are on ArcGIS ver 10.1, Using FB 4.6, Created the base project using the ArcGIS for Flex View App 4.6 - this is residing on our server so I created a zip of this file.
In Flash Builder (FB)
1. File Import Flash builder Project
2. Import project as file
3. Browsed to the location of the zipped project
4. Import method chose - Import new copy of project and extracted it to my local PC
5. When I expand the libs folder (step 4) there is only a Link Type:Merged into Code
6. I did an Add SWC browsed to the location with the swc (your step 5)
7. Did step 6 Browsed to the src folder in the unzipped API (step 7)
8. closed the properties window
9. Expanded the skins folder and did a right click New ? MXML skin and named it as instructed
10. My default package does not have a default.css

Can you set me on the right track here.
Also please note for reasons I haven't figured out yet I am not receiving any notifications when you responded to my post and I wasn't able to locate this using advanced search criteria and my name.

I feel confident you can get me started on the right track and I do so much appreciate it.

RobertScheitlin__GISP

Terry,

Here is step by step instructions:

1. Download the ArcGIS API for Flex - http://www.esri.com/apps/products/download/index.cfm?fuseaction=download.main&downloadid=1184
2. Unzip this to your local machine.
3. In your ArcGIS Viewer for Flex project. Right clcik the project in the package explorer, and choose properties.
4. Click the Flex Build Path (in the left window), in the Build path libraries (right window) expand the libs folder.
5. Expand the agslib-3.6-2013-12-13.swc
6. Select "Source attachment" and then clcik the edit button.
7. Browse to the location your unzipped the API to and select the src folder (i.e. C:\Flex Stuff\arcgis_api_for_flex_3_6\ArcGIS_Flex\src).
8. Close out the properties window and the project should rebuild.
9. Expand the FlexViewer3.6/src/com/esri/viewer/skins/ folder and right click the skins folder and choose new > MXML Skin.
10. Name it (i.e. MyPopupRendererSkin).
11. Host component = com.esri.ags.portal.PopUpRenderer
12. Change nothing else, and clcik finish.
13. Make your changes to the MyPopupRendererSkin.mxml.
14. Expand the (default package) folder and choose defaults.css
15. Add this:

esri|PopUpRenderer
    {
        skinClass:ClassReference('com.esri.viewer.skins.MyPopupRendererSkin');
    }

15. launch project in run or debug mode and you should now be using your modified popuprendererskin.

TerryHiggins

I realize this is an older post but I am a beginner trying to figure this out. I have worked through the Flex in a Week, read numerous posts but am still at a loss on where I make these changes (ie what files) so they function. I have a project built with ArcGIS Viewer for Flex that has popups for our street signs, I want to eliminate the space around the photos and remove the border. I understand that all I need to do is rem out that section in the PopUpRendererSkin.mxml - but I am at a loss do what to enter and where so this skin is applied. I appologize in advance for not explaining myself clearly. Part of the problem might also relate to not setting up my project correctly within Flash Builder.
Thanks in advance
Terry

DrewDowling

You can get FlashBuilder to "Create as a copy of" by setting the source attachment path on the API swc. Under the "Flex Build Path" expand the API swc and double-click "Source attachment" and then browse to ".../ArcGIS_Flex/skins/src" after unziping the API download.

Thank you this is exactly what I needed

ChristopherOlsen

Just as an FYI- this bug is listed as
"NIM068772- The text gets cut off within the Flex Viewer 2.3.1 for pop-up when displaying large textual information."

CharlesHarris

This is a little late, but do you ever need to display a popup for the polygon layer? If not then can't you just disable the mouse events on that graphics layer? That is how we are taking care of this issue, again keeping in mind that we do not need to display a popup for the polygon layer.

Jeremy

RobertScheitlin__GISP

Nasif,

No the enhancement did not make it in the 2.4 release.

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.