Flex API session

Flex dev lead Mansour Raad shows how to leverage the ArcGIS API for Flex.

Nov 4th, 2010

Start From:
Player Color:

Right-click on these links to download and save this video.


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:00[inaudible question]

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:11[inaudible question]

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:24(Inaudible question)

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…

Copyright 2016 Esri
Auto Scroll (on)Enable or disable the automatic scrolling of the transcript text when the video is playing. You can save this option if you login


thnx mansour,proud to see lebanese at your position,i think its a very rich and clear session.


Feb 27th, 2011. 4:51:31 AM

Comment on this Video