topic Re: Advanced Draw widget in ArcGIS Viewer for Flex Questions

Advanced Draw widget

EricVenden — Fri, 27 Jan 2012 13:51:15 GMT

I'm looking for assistance with the Advanced Draw widget. I'm trying to add the widget to a FB project and I am wondering where to put the component classes in the project. Do they go in their own folder(s) or should I add them to existing folders.
Thanks
Eric V

Re: Advanced Draw widget

dcopple — Fri, 27 Jan 2012 21:24:04 GMT

Make a new folder under the src/Widgets folder. Open FB and then Project > properties in the dropdown. In the properties dialog, select Flex Modules, and add, then browse to the AdvancedDraw.mxml file you just copied into your new folder under the widgets folder. This will allow you to make modifications, and recompile when you run the project. Hope that helps.....

When calling th widget in your config xml, you will have to use config="widgets/<your folder>/AdvancedDrawWidget.xml" and url="widgets/<your folder>/AdvancedDrawWidget.swf", or whatever you call the particular widget you are working on.

Re: Advanced Draw widget

EricVenden — Mon, 30 Jan 2012 11:33:32 GMT

Thanks for the reply Don,
I was mainly referring to the files in the assets and com folders under the src folder in the download you provided. I am not a full-fledged developer and am not sure if I just add the files in these folders to their appropriate existing folders in the existing FB project or if I just add those folders/files as they exist (file structure) to the FB project.
Thanks for your time.
Eric V

Make a new folder under the src/Widgets folder. Open FB and then Project > properties in the dropdown. In the properties dialog, select Flex Modules, and add, then browse to the AdvancedDraw.mxml file you just copied into your new folder under the widgets folder. This will allow you to make modifications, and recompile when you run the project. Hope that helps.....

When calling th widget in your config xml, you will have to use config="widgets/<your folder>/AdvancedDrawWidget.xml" and url="widgets/<your folder>/AdvancedDrawWidget.swf", or whatever you call the particular widget you are working on.

Re: Advanced Draw widget

dcopple — Mon, 30 Jan 2012 19:38:22 GMT

Eric,
I don't know if that was my download or Robert's, I don't remember posting one in the gallery. But anyway to answer your questions:

Normally when you download the source code there is a compiled folder, and uncompiled. Depending on how the file structure was built in the zipped code will dictate how you need to go about unzipping.

If you are just using the viewer you would move the images in the zipped assets folder, and past them in your in your assets folder, and then the <xxxx>Widget.xml and <xxxx>.Widget.swf into a new <xxxx> folder under widgets. I would do this with your file explorer.

I am assuming you are using FB to do some other coding, but you don't have to to add custom widgets to the Flex Viewer, as long as you have compile code (xml, and swf).

Now if you are using Flash Builder to recompile the widget then it is a little more complicated, but not impossible (I am still a beginner too). You want to copy files out of the uncompiled zipped folder.

Again copy the images out of the zipped assets folder and paste them into the assets/images folder in the source folder (src). Then unzip the a full zipped code folder for the <xxxx> widget and paste in to the Widgets folder. When you open your new folder under the Widgets folder you should see the xml, and mxml. if you leave the assets in the same folder it is ok, you'll just have to reference that in your config file. Attached is the structure you would have in FB. You don't have to put anything in the com folder, just assets and widgets, unless you start programming the API itself. You have one more step to compile the widget now. You will have your open project click on project > properties. It will open the properties dialog. On the levt side of the screen select Flex Modules, then click add and browse to the new widget folder and the mxml file for that widget. I have attached a picture of what that looks like too. Add the widget to the config file (the one under the src file) and run, it will recompile the widget and place everything in the bin-debug folder compiled. Hope that helps.....

[ATTACH=CONFIG]11541[/ATTACH][ATTACH=CONFIG]11542[/ATTACH]

Re: Advanced Draw widget

EricVenden — Tue, 31 Jan 2012 10:36:44 GMT

Thanks for the response Don,
I downloaded Ryan's Advanced Draw Widget for FV 2.4

Based on the readme - the source code references several skins and components included in the Flex API library. The source code has the widget components and also has skins, events, and utils folders.

I will try various scenarios to get the widget into my FB project.
Thanks
Eric V

Eric,
I don't know if that was my download or Robert's, I don't remember posting one in the gallery. But anyway to answer your questions:

Normally when you download the source code there is a compiled folder, and uncompiled. Depending on how the file structure was built in the zipped code will dictate how you need to go about unzipping.

If you are just using the viewer you would move the images in the zipped assets folder, and past them in your in your assets folder, and then the <xxxx>Widget.xml and <xxxx>.Widget.swf into a new <xxxx> folder under widgets. I would do this with your file explorer.

I am assuming you are using FB to do some other coding, but you don't have to to add custom widgets to the Flex Viewer, as long as you have compile code (xml, and swf).

Now if you are using Flash Builder to recompile the widget then it is a little more complicated, but not impossible (I am still a beginner too). You want to copy files out of the uncompiled zipped folder.

Again copy the images out of the zipped assets folder and paste them into the assets/images folder in the source folder (src). Then unzip the a full zipped code folder for the <xxxx> widget and paste in to the Widgets folder. When you open your new folder under the Widgets folder you should see the xml, and mxml. if you leave the assets in the same folder it is ok, you'll just have to reference that in your config file. Attached is the structure you would have in FB. You don't have to put anything in the com folder, just assets and widgets, unless you start programming the API itself. You have one more step to compile the widget now. You will have your open project click on project > properties. It will open the properties dialog. On the levt side of the screen select Flex Modules, then click add and browse to the new widget folder and the mxml file for that widget. I have attached a picture of what that looks like too. Add the widget to the config file (the one under the src file) and run, it will recompile the widget and place everything in the bin-debug folder compiled. Hope that helps.....

[ATTACH=CONFIG]11541[/ATTACH][ATTACH=CONFIG]11542[/ATTACH]

Re: Advanced Draw widget

EricVenden — Tue, 31 Jan 2012 12:44:19 GMT

Pretty straightforward in the end. I looked at some of the paths in the source code and managed to put all the files where they needed to go.
Eric V

Thanks for the response Don,
I downloaded Ryan's Advanced Draw Widget for FV 2.4

Based on the readme - the source code references several skins and components included in the Flex API library. The source code has the widget components and also has skins, events, and utils folders.

I will try various scenarios to get the widget into my FB project.
Thanks
Eric V

Re: Advanced Draw widget

RobertScheitlin__GISP — Tue, 31 Jan 2012 13:00:59 GMT

Eric,

The adding of the source code is a little complicated...

The easy part is copy the DrawAdvanced folder to the widgets folder in Flash builder.

Right click on src folder and choose new package and type com.nzgc.viewer

Copy the four folder in the Source Code\src\com\nzgc\viewer and paste them in the new package from step 2.

Right Click on assets and choose new package and type skins.

Copy "Source Code\src\assets\skins" and paste by right clicking the assets package and say yes to overwrite.

Copy "Source Code\src\assets\viewer" and paste by right clicking the assets package.

Then just add it to the modules list as usual.

Don't forget to click the top arrow (promote) and to click the Mark as answer check as shown below:

Re: Advanced Draw widget

EricVenden — Tue, 31 Jan 2012 13:44:57 GMT

Robert,
Wondering if I need to do the process you describe...I copied the source folders/files to the appropriate/new folders in my FB project, changed a couple things in the DrawWidget.mxml, and compiled the project. My changes worked and the new swf has not caused any errors...

Did I get lucky on this? Might something happen down the line?
Thanks Robert
Eric

Eric,

The adding of the source code is a little complicated...

The easy part is copy the DrawAdvanced folder to the widgets folder in Flash builder.

Right click on src folder and choose new package and type com.nzgc.viewer

Copy the four folder in the Source Code\src\com\nzgc\viewer and paste them in the new package from step 2.

Right Click on assets and choose new package and type skins.

Copy "Source Code\src\assets\skins" and paste by right clicking the assets package and say yes to overwrite.

Copy "Source Code\src\assets\viewer" and paste by right clicking the assets package.

Then just add it to the modules list as usual.

Don't forget to click the top arrow (promote) and to click the Mark as answer check as shown below:

Re: Advanced Draw widget

RobertScheitlin__GISP — Tue, 31 Jan 2012 13:52:36 GMT

Eric,

You are likely OK. These were just the steps I recommend. I posted them before I saw your post that you had figured it out. I was waiting for someone with experience using this widget to post some instructions, but when no one surfaced I started to look at how to add it myself.

Re: Advanced Draw widget

EricVenden — Tue, 31 Jan 2012 13:56:11 GMT

Thanks for looking into this Robert.

Eric,

You are likely OK. These were just the steps I recommend. I posted them before I saw your post that you had figured it out. I was waiting for someone with experience using this widget to post some instructions, but when no one surfaced I started to look at how to add it myself.

Re: Advanced Draw widget

RobertScheitlin__GISP — Tue, 31 Jan 2012 14:01:11 GMT

Eric,

Please mark your post as answered so this will not continue to appear in the forum as unanswered.

Re: Advanced Draw widget

JeffersonFerreira_Ferreira — Thu, 16 Aug 2012 14:32:06 GMT

Dear Colleagues;

I look at all possibilities and can't solve a problem.
I'm translating the Draw Advanced to portuguese and everything is fine, except for the group names displayed at widget window (Basic Text, Basic Markers, Basic Lines and Basic Areas). Seemingly the only way to change these group names is in the xml but I've changed it at the <template name="Circle" description="Basic circle marker" groupname="Basic Markers"....> to groupname="Pontos" and ins't change at widget windows. And ins't nothing else in the source code that I can change to made my customization.

Please, any ideas will be appreciated.

My best regards.

Re: Advanced Draw widget

dcopple — Thu, 16 Aug 2012 14:52:52 GMT

Search in the mxml file for the DroDownList id="markerStyle" It is in it's own group.
Below that you'll find the ArrayList of those marker objects name="Circle" etc, etc. Try changing those object names in that Array list, and see if that works. Just an idea after quickly looking at the mxml file. Below is a clip of that array. Hope that helps.

<s:HGroup width="100%"
    gap="24"
    verticalAlign="middle">
<mx:Label text="{markerStyleLabel}"/>
<s:DropDownList id="markerStyle"
      labelField="name"
      selectedIndex="0">
<s:ArrayList>
<fx:Object name="Circle" style="{SimpleMarkerSymbol.STYLE_CIRCLE}"/>
<fx:Object name="Cross" style="{SimpleMarkerSymbol.STYLE_CROSS}"/>
<fx:Object name="Diamond" style="{SimpleMarkerSymbol.STYLE_DIAMOND}"/>
<fx:Object name="Square" style="{SimpleMarkerSymbol.STYLE_SQUARE}"/>
<fx:Object name="Triangle" style="{SimpleMarkerSymbol.STYLE_TRIANGLE}"/>
<fx:Object name="X" style="{SimpleMarkerSymbol.STYLE_X}"/>
</s:ArrayList>
</s:DropDownList>
</s:HGroup>

Re: Advanced Draw widget

JeffersonFerreira_Ferreira — Thu, 16 Aug 2012 17:26:18 GMT

Search in the mxml file for the DroDownList id="markerStyle" It is in it's own group.
Below that you'll find the ArrayList of those marker objects name="Circle" etc, etc. Try changing those object names in that Array list, and see if that works. Just an idea after quickly looking at the mxml file. Below is a clip of that array. Hope that helps.

<s:HGroup width="100%"
    gap="24"
    verticalAlign="middle">
<mx:Label text="{markerStyleLabel}"/>
<s:DropDownList id="markerStyle"
      labelField="name"
      selectedIndex="0">
<s:ArrayList>
<fx:Object name="Circle" style="{SimpleMarkerSymbol.STYLE_CIRCLE}"/>
<fx:Object name="Cross" style="{SimpleMarkerSymbol.STYLE_CROSS}"/>
<fx:Object name="Diamond" style="{SimpleMarkerSymbol.STYLE_DIAMOND}"/>
<fx:Object name="Square" style="{SimpleMarkerSymbol.STYLE_SQUARE}"/>
<fx:Object name="Triangle" style="{SimpleMarkerSymbol.STYLE_TRIANGLE}"/>
<fx:Object name="X" style="{SimpleMarkerSymbol.STYLE_X}"/>
</s:ArrayList>
</s:DropDownList>
</s:HGroup>

Thanks dcopple;

But in fact ins't the dropdown list that I was talking about. It's the text that describes the groups at the widget's main window. There we have "Basic Marks" and a list of template markers; "Basic Lines" and a list of template lines and so on. These group names that was not able to change. And even its components, the templates it self, do not respond to changes in the XML (see attached file). The weird thing is that in my xml I've customized all the default templates names and the mxml says that is the xml commands this:
var templatesXML:XMLList = configXML.defaulttemplates.template;
    for each (var templateXML:XML in templatesXML)
    {
     try
     {
      var template:GraphicTemplate = new GraphicTemplate();
      template.name = templateXML.@name;
      template.description = templateXML.@description;
      template.drawingTool = templateXML.@drawingtool;
      template.groupname = templateXML.@groupname;

There isn't any component or mxml that contain these titles, only the xml.

Any ideas???
Thanks

Jefferson Ferreira Ferreira
Geographer/GIS Analyst

Re: Advanced Draw widget

dcopple — Thu, 16 Aug 2012 17:42:47 GMT

sorry, that part I am not sure, will have to look closer into it when I get time.