00:01You should all be here because you want to know more about the ArcGIS viewer for Flex.
00:03We're going to be talking about configuring and customizing the Flex viewer.
00:07My name is Bjorn Svensson. I'm the lead product engineer for the Flex team at Esri.
00:12And with me today, we have our newest member on the Flex team, Heather Gonzago.
00:18Oh, you should have had your mike on now. It's always turned off, but no. Yeah. They got that. Sorry.
00:28We're going to talk about the few different things, primarily about building new widgets...
00:33...how you can easily get started with them and also go talk a little bit about the Application Builder.
00:39And we're going to finish it off with talking about how you can use custom widgets and Application Builder together.
00:45So let's get started with the Flex viewer.
00:49How many people have used the Flex viewer before?
00:53Alright, let's do the other way.
00:54How many people have not used the Flex viewer before?
00:56Alright, the few people.
01:00Your probably already know, more or less, what the Flex viewer is.
01:02It's a configurable, read- to-deploy web application.
01:06You can pretty easily download it, configure, and deploy it.
01:11And that was our story up until end of last year when we introduced the Application Builder.
01:16The Application Builder is a great starting point where you don't have to edit configuration files.
01:21It's an application that helps you build Flex viewer applications.
01:27The way it's built up, that's the same thing as you did before if you were editing configuration files, and you can still do that.
01:34And we still have the source code available, so there's really three different ways you can access or use the Flex viewer.
01:40So out here, how many people have used the Flex...sorry, the Application Builder?
01:45I get like 10 or so people. And the compiled source code with configuration files?
01:51Maybe half. And the source code people?
01:54That's a big majority.
01:57Alright. I think we put it the right thing.
01:59We talk...we're mostly going to have code, so.
02:04Now one thing we did last year was make a truly open source for Flex viewer and all the source code is on GitHub...
02:10...and we started with that with 2.5 and also the 3.0 prerelease released last week is also on GitHub.
02:21For those who haven't used the Flex viewer before, basically it allows you to in configuration files or using Application Builder...
02:27...you can change the appearance, functionality.
02:30When we talk about the functionality, we often refer to adding widgets and the widgets have certain functionality.
02:35And then, of course, with data contents, the maps part.
02:40The widgets takes advantage of a Flex functionality called modules.
02:46Flex modules basically are when you run it in the browser, each module will get called when you need it.
02:51So if you have a lot of widgets, they don't get loaded or downloaded until the person opens it to click on it.
02:57And this is a really good feature when you're working in a browser and you don't want to download everything at the beginning...
03:02...because that would be a big, heavy download.
03:05The problem of it is that a lot of people want to use tabloids and they have learned...they know that you can with...
03:13...the new Flash Builder 4.6, you can deploy to an Android device or to an iPad.
03:17The problem with that is that the Flex viewer is not supported in that scenario because it uses modules.
03:21So we had a lot of questions in the last few days asking, How can I put the Flex viewer on my tabloid?
03:28That's not right. Tablet. Tablet. Tablet.
03:36And so basically, you can't do it because the structure that's good for the web, it's not good on a tablet.
03:42And a tablet much more, when you have an application, you install it, and you have all the code there...
03:47...and that's quite different from a web application, where it's a nice feature to download it as you need it.
03:53The main part of the widget is the XML file that comes with it and the compiled Flash or SWF files.
04:02And we'll talk more about this several times and come back to it.
04:07The widget's really what makes up the Flex viewer functionality.
04:11More widgets is a good thing, in general.
04:14There's a lot of widgets are included out of the box, and there's a lot of people who have created their own widgets.
04:19I know some of them are sitting here.
04:21How many people here have used the custom widgets? From anybody else?
04:25That's a lot...a majority.
04:26How many people wrote their own custom widgets?
04:30Almost half. Good job, guys.
04:40A lot of people haven't used Application Builder yet, so we're going to start off and just quickly describe what it is...
04:45...and then do a demo about it, with it.
04:49You use it to build your applications.
04:52It doesn't change.
04:53If you liked the way you did it before, you don't have to use it.
04:56It doesn't really add any functionality.
04:58It does make things easier.
05:00The goal is also that when we did it was that, you might use this as a starting point...
05:05...then you go back and do certain things in the configuration files so with your code...
05:09...and then you can still integrate it and work with the Application Builder, and that was the goal.
05:13It's not just a one-stop thing for some people.
05:16Even if you're working with your own source code, you might have use of using the Application Builder to compile your apps...
05:23...creating the bookmarks for the bookmark widget, you know.
05:25How do you know of extents to use?
05:27How do you connect and set up a geoprocessing?
05:29This is one of the hardest parts usually because each geoprocessing task is set up very different...
05:34...and so there's a lot of configuration you have to do, and the Application Builder can help you do that.
05:44Enough talk. Let's just see it.
05:50This is the Application Builder.
05:51The first time you create it, you will get a big arrow saying, Click here to create new applications.
05:59Once you have a few applications, they'll get listed.
06:03The first time you install it, one of the scariest screens you will see, and the hardest part about installing the Flex viewer...
06:09...is this screen.
06:10This is part of your setup.
06:12And, basically, when you have a Flex viewer application, or when you work with the Application Builder...
06:17...you need to have a web server.
06:19Most people will have IIS, and so by default, we provide a link here or the path to [unintelligible]...
06:28...and we've decided to call the default folder Flex viewers, and before we defaulted to Flex viewer...
06:35...and to not overwrite and distract those people, we now pluralize it.
06:39So it's a little [unintelligible] difference.
06:41But you can call that folder whatever you want.
06:44The key thing is also to match it up with your web base...your web server URL.
06:49And so a lot of people run into problems here if they don't have a web server or they don't know what a web server is...
06:55...and those are kind of the requirements in a documentation to get started.
07:00But if you have IIS installed, it's a very smooth process to get past this screen.
07:04You just click Save, and everything works.
07:10When you want to create the new application, you give it a name, and I already have too many demos, so we're up to demo three.
07:19What that does is basically just create that folder under a Flex viewer folder, and it contains all the SWF files and all the XML files.
07:26You can take that folder and catalog, that folder and move it to any other machine.
07:32And that's also if you go back out here and we say, Right-click on the little arrow, export...
07:38...basically what the export does is copies this folder and moves it out to anywhere you want it.
07:43So it's an easy way of have an environment you started with, usually on your desktop.
07:49We set things up, your development environment...
07:51...and you probably have a production environment where you have the real thing.
07:57And if you don't have two environments, you should have about...you should think seriously about having that.
08:01Don't mess with your production site until you're happy on your dev site.
08:07The export here, all it does is copy that folder, so you can do it yourself, as well, in the file system.
08:12Just copy the folder to wherever you want it.
08:15Each folder is its own full application.
08:18I'm pointing this out because some of the earlier Dev Summits and talks we've been giving...
08:22...we've been talking about how you can have multiple configuration files in one folder and just say, Config equal...
08:28...and then a different configuration file.
08:30Now we're trying to promote having a separate folder for each application.
08:33This makes it...there's a few benefits with that.
08:36One is that it works in Application Builder, and the second part is that it makes it very easy to move one application out...
08:42...and not have lots of extra files in there.
08:47Let's go back to our demo three.
08:50You have two options.
08:51You can either create the web maps or basemaps in operational layers.
08:55One thing that I want to point out if you're using the basemaps in operational layers is, you can add lots of these...
09:05...save it, and we go and look in the preview right away, you'll notice that our basemaps which has changed.
09:11So right now, it shows those free basemaps I added.
09:15You could add basemaps from your own server, and if you do that, you wouldn't get the nice icon by default...
09:22...but you could add an icon that shows your example.
09:25So instead of just showing the text that we had before, you can show the icons.
09:29We still support the old way, but this is a new default.
09:36Widgets. We have a number of widgets that's part of the core Flex viewer.
09:42Bookmark widget, for example, like I mentioned, it makes a lot easier to zoom into an area, like Southern California...
09:49...and say, I want to create a bookmark, So Cal, with a space.
09:55And basically now, I have a bookmark that shows that.
09:59So it makes it much easier in the Application Builder that would be before to get the [unintelligible] for that.
10:08Some of the widgets, the print widget, for example, one of the nice features with 10.1 that you might already have heard about several times...
10:16...is the print task.
10:18So I can connect to a servicesbeta2...what's the URL? Sorry. Esri.com?
10:30Anybody else gets confused about these things?
10:32There we go.
10:37By default, it will list all the possible print tasks that's available.
10:43So the default one is under utilities and its Export Web Map Task.
10:47Basically, it's something we set up on the server, and most of you would set up your own print tasks on the server...
10:53...with your own layouts.
10:54This is the default on one of our sample servers.
10:57The title of the map, Nice Map, and author Bjorn, and maybe no copyright.
11:05The for scale is another feature that we added and basically allows you to print at a certain scale...your map at a certain scale.
11:13I can save this, go to my preview, and I can preview it in browser or in the Application Builder.
11:23Europe is a nice place.
11:26The print task that I added, by default it comes up with these.
11:30I can change it from a map only to show a specific layout...A for landscape, the format I want to have.
11:38PDF might be the better format you want to have.
11:40And when you publish your print task, you can set these.
11:42If you only want people to do PDFs and if you only want to give the A for layout or your own, you could limit those.
11:48If there's only one option, we don't even show it, and then it becomes the default.
11:54When you send it to print, it basically goes to the server, creates the PDF, and you have your little nice map.
12:01Heather will show later how you can take this print widget and customize it and do a little few extra cool stuff with it.
12:11There are a number of other widgets that we've updated and improved.
12:14The edit widgets we added a lot of functionality for 10.1, geoprocessing updated.
12:18Most of the widgets have been updated to some extent to take advantage of 10.1 functionality.
12:25The layout now allows you to edit things like about.
12:29Some people complained that was hard to do.
12:31We still don't have a very nice interface for editing the HTML in here.
12:34That's something we're working on.
12:39In the design mode, a lot of people keep the title, ArcGIS viewer for Flex.
12:44You might want to name it something else.
12:46My Map Is Great.
12:49Subtitle, other things, changing colors.
12:52A lot of people start playing around with...start with the normal black/gold, which is the gold-colored text in the front...
13:00...and then white text in most other places on a black background.
13:03But you can really either pick one of these out-of-the-box ones as well as changing any of the colors.
13:13And then the preview.
13:14So that's a basic run-through in the Application Builder.
13:24A lot of people here...are here to learn about creating new widgets.
13:28Why would you want to create a new widget?
13:31Well, you guys probably already know that since a lot of you have created new widgets.
13:34Either could be because there was some functionality that was not available in the core viewer...
13:39...or it was there but it wasn't just right.
13:42You want to change a little thing here and there.
13:44Well, both of those are possible, and we're going to talk today about both those scenarios.
13:53If you want to create your own widgets, you have to write Flex code.
14:00There are a few things to keep in mind.
14:02You need to use Adobe Flex 4.5 or later, and if you want to work with Arabic [unintelligible] right to left, Arabic or Hebrew...
14:10...you need really 4.51, but you can also use 4.6 or later.
14:15All the source code you can download from GitHub.
14:17The API is not a component you need to download.
14:19And then basically you need the read the resource center, or you do like most people and don't read the help...
14:24...and ask your questions in the forum and hope that people there are friendly, which they are.
14:31Alright. I've talked enough. It's time for Heather.
14:36Heather, could you take an API sample and make a widget out of it?
14:43Yes. Yes, you can.
14:44Alright. So just a little background.
14:47I'm the newest member of the team, but I have...I've been around for a while.
14:51I've worked in various areas within support on the SDK portion of things and have had a lot of Flex-type questions that have come in.
15:00One of the ones that we get a lot were, Hey, I see this functionality in an API sample, but I don't quite...
15:08...I don't see it. Is it somewhere in the viewer? Is there a widget for this?
15:13So in this particular case, what I'm going to show you is, is we have a widget, I'm sorry, not a widget...
15:18...an API sample called Generate Renderers.
15:21Another person on our team, Lloyd's been really, really busy going in and updating a lot of these samples for 10.1 and for 3.0...
15:30...and one of them here that I want to show you is this Generates Renderers...
15:33...and basically what this does is it goes in and it creates dynamic layers on the server side.
15:38It does your server-side rendering.
15:41You guys have been asking for this for a really long time. Right?
15:45So what we have here is, basically, it's creating our renderers, class breaks renderer, and in this particular case...
15:53...we're going to go ahead and...I'm going to restart it...and what we have is our classification.
16:03We can go into our natural breaks or quantile.
16:07We can choose the number of breaks.
16:10You guys can't even see this. There we go. There you go.
16:15So basically, what I wanted to do was I wanted to take this same functionality and bring it on over into Flex viewer...
16:23...and create my own custom widget.
16:25So right now, we do not have this.
16:29We do have it coming and in the plans for later future releases.
16:33But currently right now we don't.
16:34So what would you do to go ahead and get this in place?
16:38So first things first.
16:39What I needed to do was I went in, downloaded the source code, went into GitHub, and got the prerelease source code for that.
16:46So what we see here is...there you go...got my project and then from there, I went in and you guys...
16:53...some of you may already be familiar with Julie Powell.
16:56She has that...there's like a recording online that goes in and shows you how to go in and create your own custom widget...
17:03...and she always starts with the Hello World.
17:05So I basically went in and did exactly that.
17:08We have a Hello World, just a basic template widget that's provided for you within the samples folder here.
17:13And if you go into it, you can actually see that it basically breaks it down.
17:17So what we have here is, we can a look, and you can see that there's really not a whole lot to it, just a basic Hello World.
17:25But what I wanted to show you was is that if you go back in, I copied and pasted this and called it Dynamic Rendering...
17:31...and then from there, I've got my configuration file, and I got my...the actual MXML.
17:38Alright, there's going to be a little bit more to it, right?
17:41So what I wanted to show you, and go into the actual code, first things first.
17:48So this is the actual MXML, right?
17:50So what I have here is, I'm going to start off within the widget template.
17:55So when you create your own custom widget, we give you this widget template that basically encompasses...
18:00...it handles all of the UI for you.
18:02So it takes care of it for you, for the most part.
18:06So what I wanted to show you was is if you go in--and what I did was I copied and pasted the same source code...
18:13...from that API sample into Notepad here, and I wanted to show you slight differences, right?
18:20So we've got the MXML, the markup I should say, and then, there's not a whole lot to it, but I changed a couple things, right?
18:32I went in here.
18:34In Lloyd's sample, he has predefined colors that he's got specified.
18:38Well, you could keep it if you wanted to, but I didn't want to in this case.
18:42I want to try to keep the look and feel very, very consistent with what you get within Flex viewer.
18:49So I could if I wanted to. I could've just gone in and copied and pasted basically what he has within the source code...
18:55...and it would show up looking pretty much just like this.
18:58But I wanted to make it look a little bit different. Okay?
19:01I want it a lot different. I wanted to keep it consistent with what you get within the Flex viewer.
19:07So before we go into all of this, I actually just want to show you what it looks like.
19:17Okay. Kind of boring. Yeah. It's just [unintelligible].
19:20But basically what I'm going to do here is, I'm going to go in and create these dynamic layers...
19:28...and do that thematic mapping that, you know, you've been hearing about for the past few days. Right?
19:33So we've got this classification.
19:34I can go in, just like what we had within the sample, specify our class breaks.
19:43You see, it looks a little bit different. Right?
19:45It doesn't have quite the same look as what we had for the legend within the sample.
19:51And all I really did was, I went into...and this was his...this is the main...this is the sample code.
19:59I went in and I referenced where he actually goes in and hard-codes the colors.
20:05And then in my code for the widget, I basically just took all of that out.
20:10The widget template takes care of all that for you.
20:14It's going to take note of what you've got specified in your main configuration file for your focus colors. Okay?
20:23I did go in here and I specified a focus color for, I don't if you guys remember or not, I had a little border around the legend.
20:31So I've got the focus color specified for that and also, I think that was it, yeah.
20:39So if we go into the main configuration file, and I am...some of you guys may already be familiarized with this...
20:48...but I kind of wanted to point it out just because it is something that I think a lot of people do, just, they just miss.
20:53You can specify the colors here within your main configuration file, very similar to what Bjorn just showed you...
20:59...within the Application Builder.
21:00You've got separate colors that you can specify by default.
21:04It's that gold and then the black.
21:06We can go ahead and, within here, specify what you want.
21:10So if you want a little bit more info on that, you can go into our resources center and underneath the viewer for Flex...
21:18...under main configuration file, you'll notice here under main configuration...
21:23...we've got a section that talks a little bit about the style and then the colors.
21:29And then there's a link there for setting styles for the viewer.
21:32And that actually goes in and talks a little bit more about what each individual...what each individual color is representing.
21:42So that was the first thing.
21:44It wasn't a whole lot that I basically just copied and pasted, brought it on over...
21:47...and then just updated that markup so that the colors kept consistent with what the widget currently has.
21:54So I have that. Great.
21:56So now let's actually get into the code and see what it's doing.
22:01So when I fire off my widget, it's actually going to go in here and call this widget config loaded event...
22:07...which, in turn, is going to go in and fire off my [unintelligible] function.
22:12The [unintelligible] function is going to go in and read through and check to see if you've got configuration files. Alright?
22:18These are optional.
22:20You guys...probably most of you are already familiarized with this...but basically all these configuration files are...
22:25...is just XML files that you associate with your widget...
22:29...that allows you to pass in additional parameters for your functionality that you need to do.
22:34So in this particular case, I have an XML file...wrong one...that I've got three tags that I'm referencing...
22:43...one for my service name, one for the layer, and then one for the field. Okay.
22:47So in this particular case, I'm going in and I'm going to render the population per square mile. Okay?
22:55So and in this particular case, the way I wrote the code out for demonstration purposes...
23:00...I have a layer in my main configuration file that I brought in that has the same name as demographics.
23:10You guys can see that somewhere here. There we go. There we go.
23:14And we're pointing here to...it's a 10.1 service that we're hosting publicly.
23:20Alright. So basically, checking that configuration file, grabbing the service name, grabbing the layer, grabbing the field...
23:27...and then I do just...really, there's not a whole more.
23:30I took the code from the sample, which I have right here, and I copied and pasted it.
23:41Not really...not much more changes to it than that.
23:45Basically, all it's doing, in a nutshell, I'll go into every line of code, is when I click on those drop-downs...
23:53...it's firing off a generate renderer task.
23:57That generate renderer...I'm sorry, not the generate renderer task.
23:59General renderer function, and in that function, I'm calling this task.
24:03This task is new with 3.0 and 10.1.
24:07Basically what we're doing here is, we are going in, and this is where the magic is, right?
24:13I think Bjorn actually, if you guys watched the plenary, he showed this as well with his demo.
24:19What we have given you is on the dynamic layers, and if you guys watched Tanu's sessions as well...
24:23...I think he talked about this, too.
24:25You have a layer drawing options now off of the dynamic layers.
24:30Within the layer drawing options, there's a renderer property.
24:34You can pass in, you can set you renderer properties specific, and in this case, it's that class breaks renderer.
24:40So basically I'm going in. I'm getting that layer drawing options, passing in that class breaks renderer, and that's basically it.
24:47Not a whole lot more. Okay?
24:50So I have the code copied and pasted.
24:52Everything looks great.
24:53But now I actually have to get it into my Flex viewer. Right?
24:56So this might sound really basic to some of you, but I have to say it because I catch myself doing this all the time.
25:03It's compiled code. You need to have that compiled SWF file in order for Flex viewer to bring it up and load it in.
25:10So the next step you need to do is, you have to go in, into your project, and I've already done this...
25:17...but for demonstration purposes, go to your properties, under your Flex modules...now I already have it in here...
25:24...but you're going to go in and you're going to point to that MXML file that you've just created with that code. Right?
25:30Browse to it.
25:32It's going to recompile it, create that SWF with this compiled code in whatever your output directory is that you've specified.
25:39Now you've got that SWF.
25:41One last thing that you need to do.
25:43So you're going to go in to your configuration, your main configuration file...
25:48...and that gets spun up when you first open up your viewer.
25:51And then from here, within the widget container, this is what you're going to have specified for every widget...
25:58...that you want to have shown when you bring up your Flex viewer.
26:01In this particular case, I've got my API sample renderer, and then I'm passing in the XML file from my configurations...
26:09...and then the SWF that I just generated, and it's located in my samples directory, dynamic rendering. Okay?
26:16And that's pretty much it.
26:18So go in, see it, alright, and that's it, guys.
26:31So you get the same functionality from the API sample, brought it on over into a widget.
26:37Sounds pretty simplistic for some of you, some of you, maybe not.
26:41But it is something, again, that we see a lot of people asking these questions on, and at a very high level...
26:47...those would be the steps that you would need to take.
26:50Thank you, Heather.
26:51So I think that was a pretty...did I change the screen? No. BS and Bjorn. Alright.
27:01These are pretty common.
27:02We've gotten a lot of questions, both for us and to tech support and also seeing questions on the form of this.
27:07I think it's a great way of learning more about new functionality.
27:11The samples and the APIs are usually the first place where we put new functionality...
27:16...and if you can't wait for us to make a widget of it or somebody else, then this is a very good workflow for you guys and us.
27:27Now often, we talked about a second [unintelligible] was when we already have a widget that does something that's almost right...
27:33...but you either want to add an option or you want to remove an option or you want to hard-code something...
27:38...or you want to make it look different than the widget.
27:43The example we're going to look at now is the print widget that I just showed.
27:48Are you ready? Alright.
27:51Okay. Heather's print widget.
27:53Yes. So, okay. So a lot of times as well, you may, like Bjorn was saying, you might need to do some sort of functionality.
28:01You need something within your widget, but...is this on? Now it is. Sorry about that, guys.
28:09So you need some specific functionality, but you're thinking, Hmm, do I need to go in and how much work is actually going...
28:16...is this going to require?
28:18I was thinking about this, and it's actually kind of ironic, Ashley, right?
28:22Ashley came in a couple days ago at the showcase and she asked this same exact question.
28:26I thought about this a couple weeks ago.
28:29Wouldn't it be cool, now that we can have an output from our print task, if we can generate some sort of an e-mail...
28:35...like a widget where, you know, we have your viewer and, you know, your boss, your manager, whoever it may be...
28:41...you have this...you're working with this and they need to have the map.
28:45They don't care, you know, about the viewer at all.
28:48They just want the output. Right?
28:50So how can we go ahead and generate a widget that would make that pretty simplistic.
28:55I'm like, well, we already have the output from the PDF, right?
28:58So what can I do to just go ahead and bring that on over and create, you know, within an e-mail?
29:05So I went ahead and, actually it was really, really very simplistic, to be truthful.
29:12So what I want to show you is basically the print task directly with what you get within Viewer. Alright.
29:17And this is going to look very similar to what Bjorn just showed you.
29:21But, basically, you have your dialog, the widget, that pops up, and it allows you to specify the parameters, the print parameters...
29:28...that you're going to pass in to the print task. Okay.
29:31So what we're doing here is our layout template, and I'm just going to let it go to something like landscape.
29:36And I'm a...I like my PDFs, so I'm just going to go ahead and give it a PDF format and then printing this out.
29:43And basically what this is doing, it's behind the scenes, it's calling the print task, passing in those print parameters...
29:49...and generating that output on the server.
29:51And then, what we're doing, and I'll show you in a moment, in our code, is we are actually just calling...
29:58...it's a non-Esri function, just navigate to URL, and passing in the URL of our output file here for the PDF...
30:05...and bringing it into a browser.
30:07That's great and all, but I want to have it as an e-mail, so how can I do that?
30:12So I went in, widget's pretty much the same, changed a couple things like the label.
30:19I want to do the same exact thing.
30:26But, instead of it being in my browser, I just put it directly into the body of that e-mail. Alright?
30:34So go ahead, send it to myself since I know I'm going to get it, and then from there, fire it up...
30:46...and then, in this case, since it's a PDF, I can go in and just save it out onto my machine if I wanted to.
30:52So, but basically, I mean, like I said, there's not a whole lot more to it, but really, all I'm doing is...
30:57...is I'm just passing this on over and then instead of a browser, just bringing it into an actual e-mail window instead.
31:05So what I want to do, just going to show you very quickly how I went in and actually did this.
31:13So the print task itself, there's quite a bit to it.
31:19Most of the code is, for the most part, more on the parameters configuring the author, the copyright, and so forth.
31:27I just let that go for now.
31:30But basically, what I did was I copied the existing print and I pasted it, in this case, into my samples...
31:39...and I called it just My e-mail, just a quick sample, and then I have one configuration file, nothing fancy.
31:46All it basically is, is just passing in the URL from my print task, and then, from there, show you guys, all we're doing is...
32:01...is that we're firing up this component and then from here, and you can see, yeah, there's a lot of stuff in here.
32:11But I didn't have to mess with pretty much...nah, a few lines of code. That's about it.
32:16So what I did is first things first, I went in, changed the label. Didn't want it to say print, changed it to e-mail.
32:27So basically what we were doing, and if you looked at the original print task, is we checked the configuration files...
32:33...just to see whether or not we have a tag for that label.
32:36If not, do something else.
32:38In this case, I just hard-coded it. Nothing fancy.
32:42And then from there, what's happening is, is when you, any MXML, and I'm not go in and show you all of that.
32:48You specify that print task.
32:50Give it the URL. In this case, I've got everything configured in my config file.
32:56But on this execute, what's actually happening is, it calls on the execute complete handler, that event.
33:07It's going to go in, and I created a function, just called it an e-mail task, and then from there...
33:13...I'm passing in the URL of the file, that output file, and you get that from what gets passed in from that event.
33:21And then from there, this is it. This is all I changed. Okay?
33:25I went in here, specified and just had to go in and give it the correct format...
33:31...so gave it the mail, the body, the subject, and so forth, and then the URL of that output PDF.
33:40And then navigate to the URL, and that is it.
33:43If you took a look at the original, that navigate to URL, it's basically...see here...probably have it a couple places...
33:54...I just commented out the original one.
33:57We have it written in the print task for the get result data and then also on, if you're working...
34:03...if you're working with a synchronous process as well.
34:06So asynchronous or synchronous, we have it written in there.
34:08And I did the same thing.
34:09So basically, depending upon what your print task is set as within that particular event...
34:18...we're going to go in there and then just call my e-mail task function, commented out what we originally had...
34:24...and that is it.
34:26And then, again, just like what I showed you with the dynamic renderers, you just have to go back in and, in your project...
34:33...make sure that you are compiling everything correctly, so I added that here, my e-mail widget.
34:41I have a SWF for that, and then from there, I added it into my main configuration file...
34:49...and then voilà, I have it within my Flex viewer.
34:54[Inaudible audience question]
34:57I knew someone was going to ask that, and I actually, I double-checked on all of this.
35:01That's a...the question was, how long does that map stay...how long can they access that?
35:08I let it go to the default for right now.
35:10I mean, this is a public server.
35:11I can't go in and mess with the configuration on that end.
35:15By default, they're 10 minutes. You can change that, though.
35:18In 10.1, if you go into Manager, there's, I think it's a site tab, and you can actually configure the time.
35:26You can actually turn it off, too, so that they never get cleaned out.
35:29So, but you would probably want to do something like that.
35:32You probably wouldn't like you can access this for this long, you know, make sure you get it within the next blah, blah, blah.
35:38[Inaudible audience question]
35:49Set like an actual attachment, is that it?
35:50[Inaudible audience question]
35:51No. [Inaudible audience question]
35:55Yes. So the question is, instead of sending the actual PDF, how about saying, the REST request that would create the PDF.
36:02So, yes, you could do that.
36:03I mean, this might not be the best example of how to do e-mail and keep them on your server for long...I mean PDFs on a long time.
36:09But it's more about how you can extend an existing functionality.
36:12So this would work for certain use cases, but not for everything.
36:16And if you, I'm sorry, I was going to say, if you want afterwards, we can talk a little bit more about the full-on, like you were saying...
36:24...the REST call and so forth, and we can talk about that.
36:29[Inaudible audience question]
36:34Yeah. Yes. Yep. Yep.
36:38Question in the back.
36:39[Inaudible audience question]
36:43The question is, if the print task is a GP service, is that right? Yes.
36:51So the print task is basically just a GP service.
36:54It comes out of the box.
36:55All you have to do with 10.1 is click it on, but you can also take, if all the code is there, and you can make it...
37:01...customize it and do whatever you want, but it's still a GP.
37:06If you customize it and make into your own version, as long as you keep some of the basic functionality...
37:10...it will work with the print widget out of the box.
37:13[Inaudible audience question]
37:18None of the code that we've shown is available yet, but we're planning to put these online.
37:23It would be in the code gallery, yes.
37:27I'm going to switch a little bit, so if you have questions about these two samples...
37:32...now is a good time to ask those questions, like you all are doing.
37:38[Inaudible audience question]
37:50The question is, on these layouts, can you add custom things like copyright and so on, and the answer is yes.
37:57The key [unintelligible] is that in ArcMap you create the layouts, and you do whatever you want.
38:02You put your north arrows, your copyright statements, and people cannot change those.
38:06So I showed an example of how you can change the copyright, but you might just want to hard-code that and not display it to people...
38:11...and you can do that either in the viewer or you could do it on the server side.
38:16At 10.1, you probably want to do it on the server and make it work right there.
38:23Alright. Going to switch slides.
38:31So we talked about how to create new widgets from scratch, and we talked about how to take a widget and extend it.
38:38Either way, we end up with a custom widget.
38:43A question that I've gotten a lot the last few days is, okay, I have a custom widget, but how do I give it...
38:47...how do I distribute it to people, especially now when people start using the Application Builder...
38:51...how do I put my...how do I give my widgets so they can use it?
38:56So there's two basic ways.
38:58The first is, you do it the same as before.
39:01You tell them to copy the file somewhere.
39:02You tell them to update the config file, and with the specific...add a widget, and that would just work.
39:08When you work in the Application Builder, we would not remove those tags for things...
39:13...things that Application Builder doesn't understand, it still keeps.
39:16So it allows you for editing those files and adding your own thing into it.
39:20But, more likely, you want to have it inside the Application Builder.
39:26First of all, it doesn't...it's a preview of what's to come.
39:29It's not in the prerelease that released last week.
39:33But the basic principle is that you have to provide a ZIP file with a few important files.
39:39And this is the same...so the basic thing is a SWF file and XML file...
39:44...and the third required file is a new file called a meta.XML.
39:48It's basically a file that tells us what your widget's about.
39:51What's the default configuration file? Should it have an icon? What's its name? Those kind of things.
39:56And that helps us include it in the Application Builder.
39:59You can also add other [unintelligible] things like assets.
40:02You might have a specific icon you want to use.
40:04You might have a text file, excuse me, a text file that gets loaded, a second SWF file.
40:12You might have a pretty complex widget.
40:16You might or might not want to share your source code.
40:19So one way of sharing the source code is included in this ZIP file...
40:22...and we're going to be working more with some of the community members that have been working a lot with widgets...
40:26...on what should this ZIP file look like.
40:28But the key things we're looking for is the SWF, XML, meta.XML, and we might change the name of meta.XML...
40:33...but we need another XML file that describes the ZIP file, basically.
40:40So if you look today, in some of the words you find online, there are, and this is case that identify widget by Robert...
40:47...and if you scroll down through a few folders, there's basically the identify folder and inside it you have a SWF and XML.
40:54So that same thing if you add the meta.XML would work in the Application Builder.
41:00Another widget, e-search, it has a few more files.
41:03There's assets and a second SWF file, but basically the same principle applies.
41:08If you add the meta.XML, then this would be able to be used by the Application Builder.
41:19So as you might already have seen, in this special Application Builder on my machine only...
41:25...there are supports for custom widgets, and the support for one custom widget...
41:30...well, I did have the e-mail before, but I cleaned that out.
41:34And basically when you open up this custom widget, by default...
41:37...you get an XML screen where you can type in the configuration for your custom widgets.
41:43There are...this is...our plans for the first release of this is to make it look like this...
41:48...and we're also looking long-term for you to be able to provide more information here.
41:53So right now, what you would have in your meta.XML file would be, What's the default label name...
41:59...What's the icon I want to use by default?
42:01Do I want it to be shown on default to be open or not, the widget?
42:05Preload equal open and also a URL...an optional URL if you want to have people read about your custom widgets.
42:17And [unintelligible] of course.
42:20I lost my [unintelligible] somewhere.
42:21I was talking about the next future, big future, where not only do you have a configuration file...
42:26...but you could actually have the service name would be, you have a drop-down list by selecting things from a different place...
42:32...you might have a date figure or something like this.
42:34But that way, it would require you to write a Flex component just for the configuration.
42:40And that's not probably going to be supported out the box in the first release.
42:44But this part about supporting the custom widgets, the label, icon, open or not, and a help link, that would be there.
42:58And that's basically what I demoed already, you know, blah, blah.
43:05So we got a few more slides, actually a little misleading, but about the custom widget and app builder...
43:11...I know there's been a lot of questions about it, and I've asked...I've answered a lot of them.
43:16Are there more questions about the custom widget support in the Application Builder?
43:22I did a very good job of explaining it, I see.
43:26I feel proud, because you look awake.
43:29Alright. What's coming at 3.0?
43:32If you went to our presentation yesterday at What's New in the 3.0 API?
43:36How many did that?
43:40Come on, guys. You're awake. Hands up, you know.
43:42Alright. Little bit less than half.
43:44Well, that's a workshop is online, will be online. You can read more there.
43:50But based there's a lot of new functionality and not going into detail here, but read it at the resource center...
43:56...and you will find out more about what's coming at 3.0.
44:01How do I get it?
44:02There's a download center.
44:04One of the things you will notice that we changed the resource center a little bit.
44:07So there's a new look and feel, and the 10.1 resource centers are slightly different...
44:14...but basically the easiest way to find Flex in here is going to library and in a web API, it's just API...
44:20...and in the web apps, it's the Flex viewer.
44:24And if you're in one of them, you can go back and forth between the two.
44:27You have a download link in the top right for both API and the viewer.
44:33And then the normal concept samples and forums in two places.
44:36So this is kind of the aspects where we have...we're working on it, and most of the documentation is up-to-date...
44:43...but not all of it's up-to-date with the 3.0, but that's part of our 3.0 final release.
44:51So I want to point it out that if you've been working with the 3.0 beta...
44:58...the URLs have changed a little bit for 3.0 prerelease...
45:00...but the URLs for 3.0 prerelease is basically the normal URLs that we'll be using for 3.0 final and for onwards of the 10.1 cycle.
45:09The only little change is the word, you know, beta will be dropped when 10.1 goes final.
45:16So a lot of the links that you might find in the next two months, some will go to our old resource center...
45:22...and some of it to new resource center, but if you get used to the new look and feel, the blue look and feel...
45:29...then you know you have a new place.
45:31So just keep that in mind.
45:39And also, if you click the download link, there is a link to all the previous versions as well...
45:45...download the 2.5, 2.4, 2.3, 2.1, and so on.
45:49...and we'll keep those links there.
45:53...and basically I'd like to open up for, you know, questions.
45:58That's the presentation we have, so, yep.
Configuring and Customizing ArcGIS Viewer for Flex
Bjorn Svensson and Heather Gonzago show how to extend and configure ArcGIS Viewer for Flex.
- Recorded: Mar 29th, 2012
- Runtime: 46:01
- Views: 1907
- Published: Apr 25th, 2012
- Night Mode (Off)Automatically dim the web site while the video is playing. A few seconds after you start watching the video and stop moving your mouse, your screen will dim. You can auto save this option if you login.
- HTML5 Video (Off) Play videos using HTML5 Video instead of flash. A modern web browser is required to view videos using HTML5.