Flex dev lead Mansour Raad shows how to leverage the ArcGIS API for Flex.
00:01 So my name is Mansour. I'm a senior architect at Esri. I'm leading the Flex development API team.
00:10 In addition to that, I belong to Professional Services.
00:13 So I sit on both sides of the fence.
00:16 If you need help with the Flex API, I can come out and be contracted to you guys.
00:21 Or if need be, if you need to e-mail me don't hesitate I'm right at esri.com.
00:29 I usually respond fairly quickly, and if not, it takes me usually to the end of the day…
00:33 …to clean up whatever I have and I'll usually respond.
00:36 I have a blog post on Thunderhead Explorer, check it out.
00:39 It's some very cool stuff.
00:41 I just posted a blog today about how to run a Flex application on iPhone, Android. Pretty cool.
00:47 And follow me on Twitter, I post some interesting stuff.
00:52 Not like I'm eating a sandwich, or I just sat on my bag, or I'm bored, or stuff like that.
00:56 I think I say some pretty cool things, so follow me there.
01:01 Don't follow me on…don't try to get me on Facebook…
01:03 …because I will not accept you, because that's for friends and family.
01:06 So Twitter is my professional thing.
01:09 So, anyway I want to start up with what Flex can do for you guys.
01:14 So why don't I jump in?
01:16 As I said to you guys, I belong to Professional Services…
01:19 …and I go out into the real world and do some real work using the Flex API.
01:25 So this is an application that I built for the White House that actually when the Gulf of Mexico, the BP oil spill happened…
01:34 …they want to be able to find out what is the economical impact of the spill…
01:39 …on the counties and parishes around the area.
01:42 So we built this application for the White House that enabled them to go in and actually download all the data…
01:48 …and hover on a particular state or a county and get all the demographic information about tourism, or seafood…
02:00 …or boating, or shipping that has been affected by that scenario in here.
02:03 It's a very dashboard-like story, that is very powerful.
02:06 And that's where the Flex API's very powerful, is to build dashboard expressive applications to really push information out.
02:15 Again this was, as I said, a dashboard story that we were able to build very quickly for the White House…
02:21 …and be able to take it in, and then be able go inside and demonstrate it…
02:24 …and be able to push in this really powerful, expressive application in here.
02:29 Different state claim information that has been showed up.
02:33 You can toggle the different basemaps, of course, that happen here.
02:38 And you can, of course, drill down on different criteria to show the economical impact in here.
02:44 So once that happened, and they were fine with that, then BP called me up.
02:50 And BP, when we went down to the BP down in Alabama…
02:54 …they want to be able to push to the general public what exactly is happening.
02:58 So they want to be proactive about what's happening and doing maps is a very good way to do that.
03:02 And they decided to use us to do that information out…
03:04 …and again when we went down to Alabama, literally it was nothing but Esri software in there.
03:09 You know, they're pushing data, they're bringing up maps…
03:11 …they're doing expressive, you know, they're editing data, they're…
03:17 …and so what they wanted is a dashboard story, so I built a bunch of internal dashboard stories inside…
03:21 …for every, literally every six hours, somebody's going to come up and present what's going on right now…
03:26 …but more importantly, they want to show the public what is going on.
03:29 So again, this is the real data that was published out, from what BP is pushing out.
03:35 And again we want to keep it simple, expressive to show them exactly what's happening, what's going on right now.
03:41 Not very much detail, you know you can drill down on the data.
03:44 You can get…you can find out exactly the legend right then and there.
03:50 This is exactly the site that's happening here.
03:52 So you can turn on, turn off and turn on.
03:54 You can see exactly what is the legend, it is very expressive, very powerful.
03:59 Like what you expect, what every symbol means…
04:02 …and so that was a very, very nice application that we built for BP in here.
04:10 Following the same steps, again real-life application, the MBTA in Boston…
04:16 …that's the Metropolitan Bay Transport Area.
04:20 They wanted to come up with a way of expressively showing the data that they have.
04:24 What they gave us is, they have, they gave us a text file of all the data swipes that are happening per station.
04:32 They just gave us a text file.
04:33 That's it. Nothing else. And said okay, go out and show us what you can do with this data.
04:39 So I decided to show this data in a very powerful expressive way…
04:42 …where I wanted to show the day in the life of the MBTA what it looks like.
04:47 Again, now, I want to now be able to now start playing the temporal data.
04:51 So as you can see on the left-hand side is a heat map that's going to be generated now.
04:55 See the MBTA opens up at 5 o'clock.
04:57 You can see that the data is starting to get generalized at 5 o'clock.
05:00 And as you can see by 7 o'clock things are starting to hover up and stuff like that.
05:05 And on the right-hand side I decided to have a schematic version of the data, but in 3D format.
05:11 So as the data is happening, I can now have these silos that shows me downtown Boston…
05:16 …exactly what's happening at 5 o'clock where people are leaving…
05:19 ...and now they're leaving the area and now it's going to happen again.
05:23 And now, you can see how now I have a very expressive way of looking at this data.
05:29 By the way, these are not images that are being stacked up on top of each other, this timeline.
05:35 This is heat map generated on the client side.
05:39 The server just gave me x,y value data point.
05:44 This powerful way of rendering data is all happening client-side because of the Flex API…
05:49 And we're going to talk about this…why?
05:51 And so, that's what makes this so nice, is the Flash API is very powerful at rendering images and vector data.
05:58 So that's what you're seeing here, is a combination of that together, happening.
06:03 And again, that heat map here is dynamically generated on the client side.
06:09 And again, I can do some very cool things here by creating this isometric projection of this data…
06:18 …which gives me this nice way of representing this information; pretty cool, huh?
06:24 Okay, that's very neat, I like that; I like that a lot actually.
06:28 Again, why again the Flex API is so powerful?
06:32 It's because it enables me to render massive amounts of data.
06:35 In this particular application, 15,000 data points came into the client side, okay?
06:41 I have the raw vector data, 15,000 points.
06:44 But, actually it does not make sense, actually, to render 15,000 dots.
06:48 It does not make sense to do that.
06:50 What if we could actually come up with a clustering way of rendering this data…
06:54 …and taking advantage of the CPU on the client side, I can now decluster the data as I zoom in on it.
07:02 So as I'm zooming in and panning, it will decluster the data without going back to the server…
07:07 …by showing me exactly this information as I zoom in on it to show you…
07:12 …how it gets declustered automatically.
07:14 And as I zoom out, it reclusters the data based on the map scale; pretty neat.
07:20 Again, it's a much more powerful, expressive way to render data.
07:25 Instead of just plopping dots on a map…
07:27 …let me come up with a much more powerful way of rendering this data as a cluster of data.
07:32 Much more powerful, gives me a much better experience…
07:35 …because I'm not rendering 15,000 points; it is much easier to deal with…
07:39 …and I can see now there's something happening in the Paris area…
07:41 …there's something happening down in the south of France; or if I pan, there's something going on in there.
07:46 Very powerful, much more powerful.
07:49 Again, I'm taking advantage of the CPU on the client side to do that automatic clustering and declustering of the data.
07:58 Okay, let's keep going here.
08:01 More demos to show you what's going, what you can do.
08:03 Tracing…again, ArcGIS Server is very good at network analysis and network tracing.
08:09 But what if I want to give them, the user again, a richer experience without having to interact with a server?
08:15 I can here, in this particular application, bring in all the data on the client side.
08:21 And I can create nodes and edges on the client side of this data.
08:26 This data, once it's been brought in on the client side, I can now spatially index it…
08:32 …in such a way now, when I hover on, when I bring the mouse it can automatically snap to a vector right there on the screen.
08:41 Pretty cool…why? Because now the data is spatially indexed on the client side…
08:46 …and I have this nice, expressive way of doing things.
08:49 Notice here on the top right corner since I can snap on the street, I can reverse geocode automatically as I'm on it.
08:58 Pretty neat, huh? Okay. Now again, I have a network, so if I want to go from here to here…
09:08 …it should enable me to create the path on the client side.
09:12 Pretty neat huh? Again, this is what the Flex API enables you to do, is come up with these very powerful…
09:20 …expressive, computation geometry stuff that you can do on the side.
09:24 Again, I'm not saying you don't need the server.
09:25 I'm talking about a collaborative application where you do some work here and some work here.
09:32 You don't have to do everything over there on the client side. Okay.
09:36 Pretty neat huh? Good.
09:38 Last demo that I want to talk to you guys about is collaboration.
09:42 What if, it would be really nice…it would be really nice…let me clear on the screen…
09:44 What if I can now share my screen between multiple people?
09:49 …and let me bring up another window here.
09:50 You guys don't have another computer here…but what if two people, at the same time, can look at the same application…
09:57 …and as I have the same data here, let me move it around a little bit here…
10:01 I am now going to start pushing data onto…from the server, onto the client.
10:08 Again, I am pushing, I am not pulling the server.
10:11 If you notice here, there's these green dots bouncing around.
10:14 What is happening here is the server is pushing information on the client and then reflecting accordingly.
10:20 I'm not going out to the server.
10:22 Do you have data? Do you have data? Do you have data?
10:24 It's actually pushing the information and rendering intelligently.
10:28 Again, very beautiful collaborative environment in such a way that, for example, if I drew…
10:33 …let me draw it on top of Africa here.…if I drew a particular region…
10:38 …if I drew a particular region it is automatically published…
10:43 …without me having to go click on Refresh on the server to see this.
10:47 This data has been pushed to the server and automatically published out.
10:52 Okay. Again, collaboration, very powerful, very nice environment.
10:57 Okay, any questions before we go on? Yes.
11:00 [inaudible question]
11:04 Yes…this is…so the question is, Is this cached?
11:07 Yes, this is all client-side data.
11:10 Okay. You have the option, if you want to actually make a listener on the server that will put this on a geodatabase for you.
11:18 So again, you're in the publish-subscribe environment here.
11:21 The fact that there's a publisher, there's a subscriber, who puts things in the database that is your design criteria.
11:28 Okay, so with that, now that we've done all the cool stuff now, here, that I showed you.
11:36 Unfortunately, now we have to go back to the mundane stuff, which is what is Flex now.
11:41 So Flex actually is an Adobe product.
11:43 You can find it from…if you go to this URL, Adobe products/Flex.
11:46 You can find a lot of information.
11:48 By the way, it's free.
11:50 The Flex SDK is free, it is open source.
11:53 You can now, when you get the SDK you can open up the ZIP file and you can see exactly how the components are made, by the way.
11:59 So that's actually how we learned a lot of things, it's how we open up the source.
12:03 We opened up the source file, we said Ahhh… that's how they do these things.
12:06 Or wait a minute, there's something wrong in here…
12:08 …I want to be able to change it by looking at the source code, we're able to do that.
12:12 More importantly, it's a framework.
12:14 It's a way of thinking, to building rich Internet applications.
12:18 And it runs on the Flash platform.
12:20 Now, the Flash platform is actually a virtual machine.
12:25 I keep telling you about…everybody does not understand this.
12:27 This is something very important, that the Flash Player is actually a virtual machine with a just-in-time compiler.
12:33 This virtual machine enables me to play the games I showed you before, the tracing, the clustering…
12:41 …this intelligence, this expressive…it's all in here.
12:44 But one of the nice things about it is, it is browser and desktop ubiquitous.
12:48 I can run it in IE, Firefox, Safari, Chrome…doesn't matter.
12:52 I can run it on Windows, on a Mac, on a Linux, it does not matter.
12:56 The same code base runs on all these things, no problem at all.
12:59 And now we are going to show how we are going to run it on a mobile platform.
13:04 Okay. And of course, the two mobile platforms that are most important right now, is guess what?
13:08 The Android, and what, my favorite one is what? The iPhone, correct?
13:11 [inaudible question]
13:13 Ah…Ask and you shall receive, the Lord says. Ask and you shall receive.
13:21 So again, how do I produce Flash code, so you have to bear a little bit here, okay?
13:25 So I know you're anticipating, but that will come with…
13:29 So how do I produce this Flash code?
13:31 Actually, so what I do is I get my favorite IDE, my favorite editor.
13:35 Okay, and I'm writing in something, a language called ActionScript which is actually a derivative of the ECMA Script…
13:39 …which is Java scripting and, in a declarative way, called MXML.
13:44 And then I use the free compiler, if I want to, and I will be able to compile it…
13:48 …and produce what we call a SWF file.
13:51 The SWF file is the executable that I can take and now put it on a web server…
13:55 …put it on the desktop if I want to, depending on how we build the application…
13:59 …or publish it to the store, to the Apple Store, for example, if I want to…
14:02 …and be able to download it or push it directly onto the Android application.
14:06 So what you're finally doing is executing the SWF.
14:08 …SWF is the executable part.
14:11 So what's ActionScript 3? ActionScript 3 is a modern language.
14:14 It's object oriented, there's the garbage collector like all the modern languages.
14:18 Its syntax is very much similar to C, C++, Java, so if you're familiar with the syntax of C, Java, or C Sharp…
14:26 …like if, else, while, and stuff like that, you'd be very, very comfortable in there; it's type safe.
14:32 You cannot go around casting object to whatever…it will throw an exception with the stack trace.
14:36 You will see exactly what's happening.
14:38 There's some very new things that are happening in modern languages like for example XML…
14:41 …is a type…like you have strings, and integers, and dates, and stuff like that.
14:46 Well XML is a type of object that you can manipulate in the language, which is very, very nice…
14:52 …because, as you know, right now publishing a mashup data and XML or JSON format is ubiquitous, everywhere.
14:59 So be able to bring in that data in XML format, and be able to process it directly at the player level is very, very powerful.
15:05 A regular expression is another one that comes up out of the box in there.
15:09 So here is…I mean, this a programmers' convention, correct?
15:12 I mean, I cannot go without showing you little bit of code, come on.
15:16 So here is the typical program that you write in ActionScript; you write a package.
15:22 It is a packaging, which is like a name space.
15:24 You import bunch of classes, and you declare a class called Greet, here, that extends.
15:29 Again, it's an object-oriented language, so you extend classes, you create a class…
15:33 …you extend an object, and you construct it, and then in the constructor here…
15:36 …I'm instantiating another object and I'm setting a bunch of properties in it and I'm adding that child property.
15:41 Okay. This is very, very, very powerful, very nice language, again, if you're a programmer that is used to…
15:48 …these modern languages like C Sharp or Java.
15:51 This should not be very difficult for you to use.
15:53 Actually, the syntax is so close to Java, actually I've wrote…and as you can see off my blog…
15:59 …a Java-to-ActionScript compiler…translator, because I can; the syntax is so close to each other.
16:07 So now, the next thing I told you is that you can program…is you can program an MXML.
16:11 MXML is nothing but declarative ActionScript, and how you declare it is in the XML syntax.
16:17 Okay, so there's no difference between MXML and ActionScript.
16:21 The only difference is, is again what the format syntaxes look like.
16:24 You declare xm ActionScript. It compiles down to a street internally and it's great, great, for UI lay out.
16:35 If you want to lay out your component because of the hierarcichal format of XML, then laying out your components…
16:40 …is very nice and we're going to show in a little bit what that will look like.
16:45 What does that look like?
16:46 So again, so this is what MXML looks like. Again it's very declarative.
16:53 So it's all XML so you have to use all these name spaces.
16:56 So I'm saying okay, there's an application right there and inside the application is a map component.
17:03 And in the map component I'm pointing to a tiled layer onto ArcGIS Server.
17:10 If you're familiar with the ArcGIS Server, we publish everything as a REST endpoint.
17:13 And so now here, we are using one of those published REST endpoints…
17:16 …to be able to basically make a it tiled layer into my application.
17:21 So again, because of its XML nature, it's very declarative...
17:25 That's why it's declarative, and you can understand this.
17:27 There's the global main application that has a child, who has a map, who has another child, who has a layer in there.
17:34 By the way, you're not restricted to one layer.
17:36 You can have many layers as you want in this particular thing in here.
17:39 So you can fuse different types of layers, by the way.
17:44 Dynamic tiled graphic layer, image layers, you can build your own layer if you want.
17:49 You can do, you can come up with some very, very cool things.
17:52 So again, what we have is, we have the source code in ActionScript, or MXML.
17:58 You compile it using the regular compiler.
18:01 Now, with that, like the traditional development environment, you will need libraries…
18:07 …to be able to come in and complement the basic stuff that flash or whatever this gives you.
18:12 So like you get DLL or dot-lib files is the same thing…we have something called the SWK files.
18:18 And what you do is, you link in the SWK files when you're compiling applications…
18:22 …to finally produce the SWK file or the IPA that you finally need to deployed on the platform that you need.
18:29 So there's your typical scenario in here on how you do that stuff.
18:32 Now, we give you a SWK file, which is a library that you link in your code with to build your application.
18:40 And that's what I want to show you now, right now, and this is the URL for it.
18:44 So if you want to learn about all that stuff, about our SWK library which we are going to be going to right now here…
18:49 …is, you're going to be able to see it right here.
18:53 So here we go.
18:55 So I'm going to take you to our API…documentation, by the way.
19:00 Our documentation folks have spent a lot of time on that.
19:04 You can download that API library directly from here.
19:10 Then, if you're interested, you can find out all the concepts, how to…
19:15 …what do they look like, what the diagram API looks like…
19:18 …how you can talk to the ArcGIS Server, and my favorite part of the whole thing is the samples.
19:25 If you go on the samples, we will give you all the features that are capable on the ArcGIS Server…
19:30 …and how they're being coded in the Flex API.
19:34 If you open up a particular tab on a particular functionality, you will see the application in action.
19:40 And more importantly, when you switch to the source code...it did that to me before…
19:45 …you will see how the code is written to be able to build that particular application.
19:54 So again, you can copy and paste this into your favorite editor, compile it…
19:58 …and you will be able to be up and running here.
20:01 So in this particular application, I am constraining the map to a particular extent and I'm telling it to load the data…
20:07 …to load a particular tiled map service at that particular extent here.
20:12 Again, lot of capabilities here.
20:15 In the ArcGIS 10 Server now, there is a full editing capability.
20:19 You can edit the data based on a particular template, you can add data based on a certain template.
20:24 The editor comes out of the box.
20:27 You have ArcGIS Server…is now time-aware.
20:31 So in this particular example here, I have added the earthquake data…
20:36 …and I made them time-aware, and automatically out of the box…
20:39 …we give you a slider that enables you to traverse the data and be able to see it automatically.
20:45 Again, you don't have to program much if you look at the source code.
20:48 We do that for you out of the box, pretty neat.
20:53 So again, if you're interested in seeing how that is done, look at the source code…
20:57 …and we will show you how that is shown, how it is done declaratively…
21:03 …how we added the data, how we put the labels…
21:05 …how we put the time slider to show that process happening in here.
21:12 We have again several select…you have the basic routing capability, you have service area…
21:22 …all these are capabilities that you can…for example, I want to be able to find a five-mile…
21:29 …a one-hour drive time from a particular spot.
21:32 Again, this is not as the crow flies, this is a polygon that follows the street impedances.
21:41 Very powerful, and again, we give you the source code for all these scenarios…
21:46 …to show you how we do that.
21:50 Again, here I'm mixing ActionScript and MXML together here.
21:54 So for example, I'm using the Service task to be able to do the service analysis…
21:59 …and I'm telling it, Go give me a two-minute breakdown from this whole thing in here.
22:03 Okay, any questions?
22:06 So I will highly recommend that you spend some time in here…
22:10 …look at the source code and, more importantly, we spent a lot of time on the documentation of each one of those.
22:18 So again, if you want to find out what the map component looks like, we give you the full documentation for it.
22:22 What are the properties, what are the functions, what are the capabilities of that object in here…
22:29 ….fully documented, and how you can style it, and skin it, and adjust it according to your need.
22:37 (Question from the audience) Is there anything, any plug-in that needs to be downloaded from the client side, for example, Flash?
22:42 No, that's the beauty about it, nothing.
22:44 The beauty about the Flash Player is you're already ubiquitous and 97 percent of the browser already have Flash built in.
22:49 So that's what makes Flash so amazing compared to other platforms, is that need plug-ins…
22:55 …is because you walk into a platform and it already has 97 percent of the time you can guarantee that the builder is…
23:01 …that the player is there, so there's nothing to do you download, you're up and running.
23:06 Okay, now if you require a particular version, there is a whole mechanism in which they can automatically…
23:11 …do the updating for you, and will download the plug-in if need be, but usually…
23:15 …so far 97 percent of the people already have the version that you want then you'll be fine.
23:19 That's what makes Flash so nice, by the way.
23:22 Any other questions?
23:24 (Inaudible question)
23:25 Yeah. Okay, no problem.
23:28 So any questions about the API, the documentation, and the samples here?
23:32 I will highly encourage you guys to look at that.
23:35 You will see how we are using our API.
23:37 And the samples are wonderful.
23:39 We spend some…a lot of time to show you what…how they're done.
23:42 And very important things like, how you style things.
23:46 Again, one of things that I really like about the API that we've done, is if you don't like the look of what…the way we gave it to you…
23:52 …you can go around and skin it and style it totally.
23:55 So for this particular application here, I moved the navigation from the left to the right…
24:01 …and instead of having the plus and the minus button, I was able to just add in my icons in here.
24:07 And again all that is…you can do that by skinning and styling your application here…
24:14 …and again there you go…you skin the component, you tell it how you want it to look like…
24:19 …we will follow these rules and again it's up to you to do that.
24:23 There's very good documentation online on how to do all that, we're just hitting the tip of the iceberg here.
24:29 Again, skinning, styling, making it look expressive is one of the things that we…we strive after that.
24:36 Okay, so how do I build the SWF?
24:38 So how do I build these applications in here?
24:42 And that's what actually now because we're a developer conference…
24:47 I'm actually going to jump down a little bit into code if you guys don't mind.
24:50 And I'm going to show you how I'm going to build an application here that will produce the SWF…
24:55 …that I can now deploy onto multiple environments.
24:58 Now what I'm going to be bringing here, is I'm going to be bringing here the IDE, actually, that Adobe gives actually.
25:05 This is how they make a little bit of their money, is you have to pay for that IDE.
25:08 You don't have to buy this one, but this is one of the better ones out there.
25:11 In which, it is based on Eclipse, enables me to build my applications.
25:15 And so what I want to show you here is I'm going to walk you through a very simple application…
25:21 …on how to build a simple mapping application with a dot on the map and a couple of other things…
25:25 …to show you the power of the Flex API in here.
25:28 So what I'm going to do is I'm going to go around saying I'm going to build a new project in here…
25:33 …and I'm going to call it the GeoDev application.
25:37 Notice here it automatically tells me, Do want it to run it on the desktop or the browser here?
25:42 I have the choice between to do that.
25:44 And what kind of server capability you want to connect with?
25:47 I want to connect to an ASB, to a cold fusion, to J2E, to PHP…
25:50 As a backend application I can do that.
25:53 Very nice, by the way.
25:54 So the mashup story is also very powerful in here.
26:00 Next, it tells me where you want the output to be going.
26:03 I'm want to say, Okay, go to the Bindi bug version in here…
26:05 …and now, here, this is where I add the library that you can download from our API.
26:13 Basically, when you link in your project here, this is what you're going to be able to see…
26:17 …is additional information classes that you're going to be building here.
26:21 So it builds the project, the wizard kicks in the project and what you get is you get a skeleton.
26:26 You get this nice skeleton.
26:28 It says, Okay, you're going to be building an application and I don't know what you want in there.
26:32 Okay, so you tell me what you want in here.
26:35 So in our little application, what you want is I want to put in map component.
26:39 So again, this is a very intelligent IDE.
26:42 As soon as I start typing in the map component it has automatically intellisense that will tell me…
26:47 …Okay, most likely the class you're looking for is a map, and the documentation for that map component…
26:53 …is shown down below to enable me to say, Okay, what are you looking for?
26:58 So okay, by hitting me, by taking that component, says, Okay, you created that map component…
27:03 …and I say, Okay, and I want to give it the map element in here, and okay.
27:09 There's nothing, no layers in here.
27:10 If I run this application in here it will launch the browser because I told it this is a browser application.
27:18 And it says, Okay, you have your map, there's our logo, there's the navigation…
27:22 …and you did not tell me what layers you want to show in here so okay, I'm not going to do anything…
27:26 …I'm not going to show you anything.
27:27 Remember, we at Esri give you the capability to put any layer you want, not just, you know the world or stuff like that…
27:34 …you can talk to your own server in here, that's why by default we don't show you anything…
27:39 …it's because well, we don't know what you want to talk to.
27:41 Most likely, a lot of people don't talk to the global server up in the cloud.
27:44 They talk to their own data in here.
27:47 So actually, but in this particular case, I am going to talk to the cloud.
27:50 I'm going to tell it, Okay go to the cloud and bring in a tiled layer.
27:56 Esri produces data in several formats, in a tiled format like Google and Yahoo and stuff like that…
28:02 …but the other format is a dynamic map, where we go out to the server…
28:04 …we go to the database, we bring in the data, and we produce it dynamically imaged for you.
28:10 Of course, as you can tell it's a very slow process, this tile format where already it is precomputed, it's so much faster.
28:16 Correct? So this what I'm doing here, is I'm telling it go to the ArcGIS Online, which is our cloud services…
28:22 …and bring in the world imagery data and make that as a layer in here.
28:28 So when I run this application now…now I have…
28:32 I went to the cloud and I have my full basemap data, fully zoomable, fully panable, fully ready to meet, to interact with.
28:40 And as I'm zooming in and zooming out, I get the tiled information as I go around.
28:44 Yes, you will notice that happening. Pretty cool huh? See how easy it is?
28:49 That's what makes Flex so amazing, is one, your productivity as a developer is going to shoot off the roof.
28:57 You are going to be so productive that this will…you can ask for a raise.
29:04 And spend less time at work, and go work with your family.
29:10 So again, I told you, you can put several layers in here.
29:13 One of the layers that I can put in is this mashup story I keep telling you about.
29:17 I don't want to bring in tile data, I want to create my own data in here.
29:22 So in here I'm creating a graphic layer…
29:24 …and on the graphic layer, I basically can put in my own graphic component.
29:28 My component that I can bring in from anywhere I want.
29:31 So here I'm telling it create me a graphic and the graphic has a geometry…
29:36 …and I'm going to put that as a web Mercator map point.
29:41 Remember this data that I brought in from the cloud is in web Mercator…
29:46 …remember one of the things about Esri is that the data can be in different projections.
29:53 So one of the things that is nice about the API is it can fuse data from different sources…
29:58 …but from also different projections.
30:00 That's what differentiates us with our competition, whereas our competition…
30:04 …is always expecting the data in lat-long or something like, that's it you cannot do anything else…
30:08 …not true when I'm working with a local government.
30:11 The data is actually in local projection.
30:13 I can go to places where they have their own projection string which does not exist in the world.
30:18 It is not common.
30:19 I need to be able to take data fuse it into that scenario in here.
30:22 That's what this enables you to do in here.
30:24 So in this particular case, because web Mercator is such a ubiquitous now projection format…
30:31 …we made that available for you in which now like I say I want to put the data at latitude…
30:35 …at a particular longitude 45.45 degrees.
30:37 …Now again, I need to symbolize it.
30:39 If I don't symbolize it to look at the black dot, it will look ugly.
30:45 Actually, I can show what this will look like here.
30:47 You're not going to see it on your screen because of the resolution of the screen in here.
30:51 But what you will notice, do you see that black dot in here?
30:54 Is it possible? It's kind of hard.
30:56 So yeah, exactly that's the point; it's kind of hard, can't you like turn that into a different color, Mansour?
31:01 Sure! I can now symbolize it using the symbol format here, and I'm going to tell it okay, symbolize it…
31:07 …using a simple marker symbol and color it red, red…and I want to have a size of 50 pixels…
31:17 …so now this better be available on my screen here.
31:24 Okay, and you see this nice little dot.
31:26 Now you tell me, you know Mansour this is very nice, can I change the size and the color of this…
31:32 …and I want to show you now where the power of Flex comes in.
31:35 Flex is not just an SDK or an API or stuff like that…
31:38 …I told you it's a framework but it comes out of the box with a plethora of widgets that you will be able to use.
31:45 So out of the box it gives you a date picker, a color picker, a slider, a check box, a button, all that stuff is available to you here.
31:53 What I want to do here, is I want to add a slider and as the slider is moving…
31:59 …I want to modify that size in here, and I want to show you how that is done in here.
32:02 There's the slider, and now as I change it, it automatically does it without me having to program it.
32:05 So here, I'm going to put in the slider that comes out of the box by the way.
32:10 It's an H slider.
32:11 I'm going to call it, give it the ID HS.
32:14 ID equal to HS.
32:17 I'm going to give it a minimum value of, let's say, 10 pixels…
32:20 …and a maximum value of 50 pixels and a current value out of the box, when the application comes out has to be 20.
32:28 And now magic time ladies and gentlemen.
32:33 Without programming, I'm going to use these curly braces, those are magic curly braces, it says please watch that object.
32:45 And every time its value property changes, please assign it to this size. Pretty cool huh?
32:56 Now, watch this. Watch this.
33:22 …that enables me to look for components and bind them together without me having to program anything.
33:30 One other component which is very powerful, I want to show you here for example.
33:33 We want to to change the color.
33:35 I want to be able to put the color picker.
33:36 So what I'm going to do is, I'm going to group those components horizontally so that they appear right next to each other…
33:43 …instead of on top of each other and I'm going to add a color picker.
33:48 And I'm going to call that the ID equal to CP.
33:50 Now again, same thing without programming, I'm going to bind the color to the color picker…
33:58 …every time the selected color changes it will change the color of that component.
34:04 How long did it used to take you to do this, if you had to do it programmatically?
34:08 It used to take you forever. And now here you go.
34:11 I have the big square, and now the color picker component, right out of the box that enables me to do that.
34:19 Pretty neat. Good story. Okay. I'm running short on time here, and I want to talk about something else…
34:27 …that is dear to my heart, which is mobile. Mobile, mobile, mobile.
34:34 Last week at Max, Adobe announced Flex mobile story, now I can build Flex applications…
34:42 …and deploy them not only on browser and desktop, but I can start deploying them on Android phones.
34:52 So actually what I want to show is actually the Flex application running on the Android right now.
35:00 And the way you do that is you use the new Flash Builder called Burrito which is the IDE that you have to do that.
35:06 And the same Flex code that you have now suddenly, and the Flex same API…
35:14 …that we have remember we wrote that piece of code already, the map component and the tide layer and the graphic layer.
35:21 The same map component now I can now compile it and instead of being deployed on the desktop…
35:28 …or on the browser, now I can through the USB, I can deploy it on the Android application in here.
35:36 And what I want to show you is now the application running on the Android in here…
35:41 …in which this is a very simple application that I built.
35:48 And I'm going to look for it right here, it's deployed by the way.
35:55 Where is it? My…right here.
36:00 Let me go home…and so again, you will never write code like that where basically you put in a where clause…
36:06 …but I'm using the query statement that we have in which it is talking now to ArcGIS.com…
36:11 …selecting all the states that start with M.
36:15 …And so now it's going to go out to ArcGIS.com, and it's going to query all the states…
36:19 …from our demographic data, and it's going to return the data…
36:23 …it's going to return the data…there we go, it's going to return the data…
36:28 …it's called wireless, it's going to return the data in here as a list.
36:32 And now, I'm taking advantage of the rotation API…
36:37 …in such a way, when I rotate the API in here, when I rotate the screen, it will turn it into a map component.
36:47 Pretty cool huh. So again, based on state of the device, I can take the same information…
36:55 …and represent it in mapping, which is vector data and maps and raster or as…
37:03 …when I switch it around here back to a list based on the state of the application.
37:09 Now the beauty about it is, same Flex code, I did not have to write the Java Android or anything like that here.
37:17 Pretty neat huh. Now one more thing, a la Steve Jobs, is yeah, yeah, everybody loves Android…
37:26 …but everybody wants to see this animal, correct?
37:29 So there is a packager in which it can take SWF files, turn them into binary code…
37:36 …IPAs, in which now you can run it on an iPhone.
37:40 So now the same application now, suddenly, running on an iPhone…I didn't have to do anything.
37:51 I just now launched it, compiled it, deployed it.
37:55 Called the query, same code ladies and gentlemen, just deployed differently.
38:00 Come on. Come on network. Here we go.
38:04 And with the same behavior, I switch it around, it will turn it into a…same code, all these different screens.
38:18 It's called the iPhone Packager. It's a packager for iPhone, it's available.
38:22 Look at my blog again. Shameless plug for my blog…
38:29 I just blogged about it… How to use the Esri Flex…
38:34 Shameless plug for my blogpost…
38:37 How to use the Flex API on Android and iPhone.
38:41 So check it out and you'll be able to go out…now it's still in infancy, you know, but…
© Esri 2013 http://www.esri.com