00:01So my name is Mansour. I'm a senior architect at Esri. I'm leading the Flex development API team.
00:10In addition to that, I belong to Professional Services.
00:13So I sit on both sides of the fence.
00:16If you need help with the Flex API, I can come out and be contracted to you guys.
00:21Or if need be, if you need to e-mail me don't hesitate I'm right at esri.com.
00:29I 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:36I have a blog post on Thunderhead Explorer, check it out.
00:39It's some very cool stuff.
00:41I just posted a blog today about how to run a Flex application on iPhone, Android. Pretty cool.
00:47And follow me on Twitter, I post some interesting stuff.
00:52Not like I'm eating a sandwich, or I just sat on my bag, or I'm bored, or stuff like that.
00:56I think I say some pretty cool things, so follow me there.
01:01Don'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:06So Twitter is my professional thing.
01:09So, anyway I want to start up with what Flex can do for you guys.
01:14So why don't I jump in?
01:16As 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:25So 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:42So 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:03It's a very dashboard-like story, that is very powerful.
02:06And that's where the Flex API's very powerful, is to build dashboard expressive applications to really push information out.
02:15Again 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:29Different state claim information that has been showed up.
02:33You can toggle the different basemaps, of course, that happen here.
02:38And you can, of course, drill down on different criteria to show the economical impact in here.
02:44So once that happened, and they were fine with that, then BP called me up.
02:50And 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:58So they want to be proactive about what's happening and doing maps is a very good way to do that.
03:02And 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:09You 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:29So again, this is the real data that was published out, from what BP is pushing out.
03:35And again we want to keep it simple, expressive to show them exactly what's happening, what's going on right now.
03:41Not very much detail, you know you can drill down on the data.
03:44You can get…you can find out exactly the legend right then and there.
03:50This is exactly the site that's happening here.
03:52So you can turn on, turn off and turn on.
03:54You can see exactly what is the legend, it is very expressive, very powerful.
03:59Like 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:10Following the same steps, again real-life application, the MBTA in Boston…
04:16…that's the Metropolitan Bay Transport Area.
04:20They wanted to come up with a way of expressively showing the data that they have.
04:24What they gave us is, they have, they gave us a text file of all the data swipes that are happening per station.
04:32They just gave us a text file.
04:33That's it. Nothing else. And said okay, go out and show us what you can do with this data.
04:39So 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:47Again, now, I want to now be able to now start playing the temporal data.
04:51So as you can see on the left-hand side is a heat map that's going to be generated now.
04:55See the MBTA opens up at 5 o'clock.
04:57You can see that the data is starting to get generalized at 5 o'clock.
05:00And as you can see by 7 o'clock things are starting to hover up and stuff like that.
05:05And on the right-hand side I decided to have a schematic version of the data, but in 3D format.
05:11So 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:23And now, you can see how now I have a very expressive way of looking at this data.
05:29By the way, these are not images that are being stacked up on top of each other, this timeline.
05:35This is heat map generated on the client side.
05:39The server just gave me x,y value data point.
05:44This powerful way of rendering data is all happening client-side because of the Flex API…
05:49And we're going to talk about this…why?
05:51And so, that's what makes this so nice, is the Flash API is very powerful at rendering images and vector data.
05:58So that's what you're seeing here, is a combination of that together, happening.
06:03And again, that heat map here is dynamically generated on the client side.
06:09And 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:24Okay, that's very neat, I like that; I like that a lot actually.
06:28Again, why again the Flex API is so powerful?
06:32It's because it enables me to render massive amounts of data.
06:35In this particular application, 15,000 data points came into the client side, okay?
06:41I have the raw vector data, 15,000 points.
06:44But, actually it does not make sense, actually, to render 15,000 dots.
06:48It does not make sense to do that.
06:50What 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:02So 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:14And as I zoom out, it reclusters the data based on the map scale; pretty neat.
07:20Again, it's a much more powerful, expressive way to render data.
07:25Instead 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:32Much 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:46Very powerful, much more powerful.
07:49Again, I'm taking advantage of the CPU on the client side to do that automatic clustering and declustering of the data.
07:58Okay, let's keep going here.
08:01More demos to show you what's going, what you can do.
08:03Tracing…again, ArcGIS Server is very good at network analysis and network tracing.
08:09But what if I want to give them, the user again, a richer experience without having to interact with a server?
08:15I can here, in this particular application, bring in all the data on the client side.
08:21And I can create nodes and edges on the client side of this data.
08:26This 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:41Pretty 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:49Notice here on the top right corner since I can snap on the street, I can reverse geocode automatically as I'm on it.
08:58Pretty 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:12Pretty 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:24Again, I'm not saying you don't need the server.
09:25I'm talking about a collaborative application where you do some work here and some work here.
09:32You don't have to do everything over there on the client side. Okay.
09:36Pretty neat huh? Good.
09:38Last demo that I want to talk to you guys about is collaboration.
09:42What if, it would be really nice…it would be really nice…let me clear on the screen…
09:44What if I can now share my screen between multiple people?
09:49…and let me bring up another window here.
09:50You 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:01I am now going to start pushing data onto…from the server, onto the client.
10:08Again, I am pushing, I am not pulling the server.
10:11If you notice here, there's these green dots bouncing around.
10:14What is happening here is the server is pushing information on the client and then reflecting accordingly.
10:20I'm not going out to the server.
10:22Do you have data? Do you have data? Do you have data?
10:24It's actually pushing the information and rendering intelligently.
10:28Again, 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:47This data has been pushed to the server and automatically published out.
10:52Okay. Again, collaboration, very powerful, very nice environment.
10:57Okay, any questions before we go on? Yes.
11:04Yes…this is…so the question is, Is this cached?
11:07Yes, this is all client-side data.
11:10Okay. 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:18So again, you're in the publish-subscribe environment here.
11:21The fact that there's a publisher, there's a subscriber, who puts things in the database that is your design criteria.
11:28Okay, so with that, now that we've done all the cool stuff now, here, that I showed you.
11:36Unfortunately, now we have to go back to the mundane stuff, which is what is Flex now.
11:41So Flex actually is an Adobe product.
11:43You can find it from…if you go to this URL, Adobe products/Flex.
11:46You can find a lot of information.
11:48By the way, it's free.
11:50The Flex SDK is free, it is open source.
11:53You 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:59So that's actually how we learned a lot of things, it's how we open up the source.
12:03We opened up the source file, we said Ahhh… that's how they do these things.
12:06Or 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:12More importantly, it's a framework.
12:14It's a way of thinking, to building rich Internet applications.
12:18And it runs on the Flash platform.
12:20Now, the Flash platform is actually a virtual machine.
12:25I keep telling you about…everybody does not understand this.
12:27This is something very important, that the Flash Player is actually a virtual machine with a just-in-time compiler.
12:33This 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:44But one of the nice things about it is, it is browser and desktop ubiquitous.
12:48I can run it in IE, Firefox, Safari, Chrome…doesn't matter.
12:52I can run it on Windows, on a Mac, on a Linux, it does not matter.
12:56The same code base runs on all these things, no problem at all.
12:59And now we are going to show how we are going to run it on a mobile platform.
13:04Okay. And of course, the two mobile platforms that are most important right now, is guess what?
13:08The Android, and what, my favorite one is what? The iPhone, correct?
13:13Ah…Ask and you shall receive, the Lord says. Ask and you shall receive.
13:21So again, how do I produce Flash code, so you have to bear a little bit here, okay?
13:25So I know you're anticipating, but that will come with…
13:29So how do I produce this Flash code?
13:31Actually, so what I do is I get my favorite IDE, my favorite editor.
13:35Okay, 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:44And 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:51The 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:06So what you're finally doing is executing the SWF.
14:08…SWF is the executable part.
14:11So what's ActionScript 3? ActionScript 3 is a modern language.
14:14It's object oriented, there's the garbage collector like all the modern languages.
14:18Its 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:32You cannot go around casting object to whatever…it will throw an exception with the stack trace.
14:36You will see exactly what's happening.
14:38There'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:46Well 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:59So 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:05A regular expression is another one that comes up out of the box in there.
15:09So here is…I mean, this a programmers' convention, correct?
15:12I mean, I cannot go without showing you little bit of code, come on.
15:16So here is the typical program that you write in ActionScript; you write a package.
15:22It is a packaging, which is like a name space.
15:24You import bunch of classes, and you declare a class called Greet, here, that extends.
15:29Again, 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:41Okay. 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:51This should not be very difficult for you to use.
15:53Actually, 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:07So now, the next thing I told you is that you can program…is you can program an MXML.
16:11MXML is nothing but declarative ActionScript, and how you declare it is in the XML syntax.
16:17Okay, so there's no difference between MXML and ActionScript.
16:21The only difference is, is again what the format syntaxes look like.
16:24You declare xm ActionScript. It compiles down to a street internally and it's great, great, for UI lay out.
16:35If 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:45What does that look like?
16:46So again, so this is what MXML looks like. Again it's very declarative.
16:53So it's all XML so you have to use all these name spaces.
16:56So I'm saying okay, there's an application right there and inside the application is a map component.
17:03And in the map component I'm pointing to a tiled layer onto ArcGIS Server.
17:10If you're familiar with the ArcGIS Server, we publish everything as a REST endpoint.
17:13And 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:21So again, because of its XML nature, it's very declarative...
17:25That's why it's declarative, and you can understand this.
17:27There's the global main application that has a child, who has a map, who has another child, who has a layer in there.
17:34By the way, you're not restricted to one layer.
17:36You can have many layers as you want in this particular thing in here.
17:39So you can fuse different types of layers, by the way.
17:44Dynamic tiled graphic layer, image layers, you can build your own layer if you want.
17:49You can do, you can come up with some very, very cool things.
17:52So again, what we have is, we have the source code in ActionScript, or MXML.
17:58You compile it using the regular compiler.
18:01Now, 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:12So like you get DLL or dot-lib files is the same thing…we have something called the SWK files.
18:18And 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:29So there's your typical scenario in here on how you do that stuff.
18:32Now, we give you a SWK file, which is a library that you link in your code with to build your application.
18:40And that's what I want to show you now, right now, and this is the URL for it.
18:44So 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:53So here we go.
18:55So I'm going to take you to our API…documentation, by the way.
19:00Our documentation folks have spent a lot of time on that.
19:04You can download that API library directly from here.
19:10Then, 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:25If 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:34If you open up a particular tab on a particular functionality, you will see the application in action.
19:40And 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:54So 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:01So 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:12Again, lot of capabilities here.
20:15In the ArcGIS 10 Server now, there is a full editing capability.
20:19You can edit the data based on a particular template, you can add data based on a certain template.
20:24The editor comes out of the box.
20:27You have ArcGIS Server…is now time-aware.
20:31So 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:45Again, you don't have to program much if you look at the source code.
20:48We do that for you out of the box, pretty neat.
20:53So 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:12We 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:32Again, this is not as the crow flies, this is a polygon that follows the street impedances.
21:41Very powerful, and again, we give you the source code for all these scenarios…
21:46…to show you how we do that.
21:50Again, here I'm mixing ActionScript and MXML together here.
21:54So 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:03Okay, any questions?
22:06So 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:18So again, if you want to find out what the map component looks like, we give you the full documentation for it.
22:22What 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:42No, that's the beauty about it, nothing.
22:44The beauty about the Flash Player is you're already ubiquitous and 97 percent of the browser already have Flash built in.
22:49So 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:06Okay, 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:19That's what makes Flash so nice, by the way.
23:22Any other questions?
23:25Yeah. Okay, no problem.
23:28So any questions about the API, the documentation, and the samples here?
23:32I will highly encourage you guys to look at that.
23:35You will see how we are using our API.
23:37And the samples are wonderful.
23:39We spend some…a lot of time to show you what…how they're done.
23:42And very important things like, how you style things.
23:46Again, 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:55So 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:07And 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:23There's very good documentation online on how to do all that, we're just hitting the tip of the iceberg here.
24:29Again, skinning, styling, making it look expressive is one of the things that we…we strive after that.
24:36Okay, so how do I build the SWF?
24:38So how do I build these applications in here?
24:42And that's what actually now because we're a developer conference…
24:47I'm actually going to jump down a little bit into code if you guys don't mind.
24:50And 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:58Now what I'm going to be bringing here, is I'm going to be bringing here the IDE, actually, that Adobe gives actually.
25:05This is how they make a little bit of their money, is you have to pay for that IDE.
25:08You don't have to buy this one, but this is one of the better ones out there.
25:11In which, it is based on Eclipse, enables me to build my applications.
25:15And 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:28So 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:37Notice here it automatically tells me, Do want it to run it on the desktop or the browser here?
25:42I have the choice between to do that.
25:44And what kind of server capability you want to connect with?
25:47I want to connect to an ASB, to a cold fusion, to J2E, to PHP…
25:50As a backend application I can do that.
25:53Very nice, by the way.
25:54So the mashup story is also very powerful in here.
26:00Next, it tells me where you want the output to be going.
26:03I'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:13Basically, 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:21So it builds the project, the wizard kicks in the project and what you get is you get a skeleton.
26:26You get this nice skeleton.
26:28It says, Okay, you're going to be building an application and I don't know what you want in there.
26:32Okay, so you tell me what you want in here.
26:35So in our little application, what you want is I want to put in map component.
26:39So again, this is a very intelligent IDE.
26:42As 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:58So 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:09There's nothing, no layers in here.
27:10If I run this application in here it will launch the browser because I told it this is a browser application.
27:18And 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:27Remember, 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:41Most likely, a lot of people don't talk to the global server up in the cloud.
27:44They talk to their own data in here.
27:47So actually, but in this particular case, I am going to talk to the cloud.
27:50I'm going to tell it, Okay go to the cloud and bring in a tiled layer.
27:56Esri 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:10Of 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:16Correct? 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:28So when I run this application now…now I have…
28:32I went to the cloud and I have my full basemap data, fully zoomable, fully panable, fully ready to meet, to interact with.
28:40And as I'm zooming in and zooming out, I get the tiled information as I go around.
28:44Yes, you will notice that happening. Pretty cool huh? See how easy it is?
28:49That's what makes Flex so amazing, is one, your productivity as a developer is going to shoot off the roof.
28:57You are going to be so productive that this will…you can ask for a raise.
29:04And spend less time at work, and go work with your family.
29:10So again, I told you, you can put several layers in here.
29:13One of the layers that I can put in is this mashup story I keep telling you about.
29:17I don't want to bring in tile data, I want to create my own data in here.
29:22So 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:28My component that I can bring in from anywhere I want.
29:31So 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:41Remember 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:53So 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:00That'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:11The data is actually in local projection.
30:13I can go to places where they have their own projection string which does not exist in the world.
30:18It is not common.
30:19I need to be able to take data fuse it into that scenario in here.
30:22That's what this enables you to do in here.
30:24So 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:39If I don't symbolize it to look at the black dot, it will look ugly.
30:45Actually, I can show what this will look like here.
30:47You're not going to see it on your screen because of the resolution of the screen in here.
30:51But what you will notice, do you see that black dot in here?
30:54Is it possible? It's kind of hard.
30:56So yeah, exactly that's the point; it's kind of hard, can't you like turn that into a different color, Mansour?
31:01Sure! 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:24Okay, and you see this nice little dot.
31:26Now 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:35Flex 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:45So 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:53What 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:02There's the slider, and now as I change it, it automatically does it without me having to program it.
32:05So here, I'm going to put in the slider that comes out of the box by the way.
32:10It's an H slider.
32:11I'm going to call it, give it the ID HS.
32:14ID equal to HS.
32:17I'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:28And now magic time ladies and gentlemen.
32:33Without programming, I'm going to use these curly braces, those are magic curly braces, it says please watch that object.
32:45And every time its value property changes, please assign it to this size. Pretty cool huh?
32:56Now, watch this. Watch this.
33:22…that enables me to look for components and bind them together without me having to program anything.
33:30One other component which is very powerful, I want to show you here for example.
33:33We want to to change the color.
33:35 I want to be able to put the color picker.
33:36So 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:48And I'm going to call that the ID equal to CP.
33:50Now 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:04How long did it used to take you to do this, if you had to do it programmatically?
34:08It used to take you forever. And now here you go.
34:11I have the big square, and now the color picker component, right out of the box that enables me to do that.
34:19Pretty 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:34Last 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:52So actually what I want to show is actually the Flex application running on the Android right now.
35:00And 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:06And 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:21The 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:36And 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:48And I'm going to look for it right here, it's deployed by the way.
35:55Where is it? My…right here.
36:00Let 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:32And 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:47Pretty 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:09Now the beauty about it is, same Flex code, I did not have to write the Java Android or anything like that here.
37:17Pretty 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:29So 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:40So now the same application now, suddenly, running on an iPhone…I didn't have to do anything.
37:51I just now launched it, compiled it, deployed it.
37:55Called the query, same code ladies and gentlemen, just deployed differently.
38:00Come on. Come on network. Here we go.
38:04And with the same behavior, I switch it around, it will turn it into a…same code, all these different screens.
38:18It's called the iPhone Packager. It's a packager for iPhone, it's available.
38:22Look at my blog again. Shameless plug for my blog…
38:29I just blogged about it… How to use the Esri Flex…
38:34Shameless plug for my blogpost…
38:37How to use the Flex API on Android and iPhone.
38:41So check it out and you'll be able to go out…now it's still in infancy, you know, but…