Search Results

Search found 21072 results on 843 pages for 'thin client'.

Page 727/843 | < Previous Page | 723 724 725 726 727 728 729 730 731 732 733 734  | Next Page >

  • Fedora 17 transparent Ethernet Bridge not forwarding IP traffic

    - by mcdoomington
    I am running on Fedora 17 with the latest ebtables and have been trying to setup a transparent bridge - using the following script, I send a ping through the bridged host and only see the requests on the bridge (among other traffic from eth0), BUT, arps and arp replies are making it through. My host is setup - Client 192.168.1.10 <-- eth0 -- eth2 192.168.1.20 Ethernet script: #!/bin/sh brctl addbr br0; brctl stp br0 on; brctl addif br0 eth0; brctl addif br0 eth2; (ifdown eth0 1>/dev/null 2>&1;); (ifdown eth2 1>/dev/null 2>&1;); ifconfig eth0 0.0.0.0 up; ifconfig eth2 0.0.0.0 up; echo "1" > /proc/sys/net/ipv4/ip_forward; ebtables -P INPUT DROP ebtables -P FORWARD DROP ebtables -P OUTPUT DROP ebtables -A FORWARD -p ipv4 -j ACCEPT ebtables -A FORWARD -p arp -j ACCEPT Any assistance would be great!

    Read the article

  • Best way to say "sync all system clocks to this server, when and ONLY when I say so?" Mixed setup of Windows+Linux servers.

    - by twblamer
    Title pretty much explains it. Let's say there's 100 servers, various versions of Windows and Linux, and one Windows server is the "master clock." I did look at this question: How do I synchronize clocks between Linux and Windows? This hints that ntp can do what I want if I run "ntpd -q" on a client (?). If I install ntp I also need to guarantee that it will only sync the times when I force it to. Even better if I have a log that tells me every time a sync was performed. I'm doing benchmark runs and I need to be able to say something like this: "Clocks were synced on all the benchmark systems at 09:42:01am on the master. A benchmark run was then initiated and allowed to run for six hours. None of the system clocks were altered during this time interval." I understand there is subsequent clock drift, but for now that's the way we're doing things and I'm doing it with a manual process. I'd rather at least automate the one-time sync.

    Read the article

  • Downloading Emails locally with Thunderbird

    - by r_honey
    I am using Gmail (web interface) for sometime now, and have well over 20 labels and some thousand mails there archived to different labels in Gmail. Now I want to have a local copy of all my mails and following points are important in the context: The Primary mail access mechanism would continue to be Gmail web for me. I just want a backup of my mail account locally. Ideally the mails should download locally in folders named after Gmail labels (I know this is possible via IMAP but probably not by POP) After all my mails are available locally, I will delete most of them in Gmail to free up space and because I want to archive them. The mails should continue to exist locally and should not be deleted when I delete when from Gmail web interface. I would be syncing my gmail account locally let's say every month. So, the new mails that I have sent/received during this period should come over to my local mailbox in the folders named after Gmail labels. I do understand that Gmail maintains a single copy of email having 2 different labels and such email would get duplicated locally in the 2 folders and I am okay with that. Essentially you can see I just want to archive my mails from the Gmail server to a local backup and then sync (one way from Gmail to locally) new mails at regular intervals. For some points above, POP seems to be the option while IMAP seems for the others. I am really confused and need help in deciding which of POP or IMAP would suit me best. I have currently chosen Thunderbird to be my local email client but would not have a problem switching to Outlook or anything else as long as I get my desired archiving functionality.

    Read the article

  • Mail server DNS failed to resolved by Mac clients

    - by Concordus Applications
    We have two internal DNS servers. One is located on a linux server box and the other is the router's DNS management. We set the linux box as primary DNS via DHCP and the router as secondary. We have a few Mac clients that are accessing our internal mail server (hostnamed "mail" internally). When using IMAP or SMTP against the mail server internally, the mac boxes will sometimes fail to locate the server. If I use NSLOOKUP I can see that "mail" is pointed to the correct IP address and is being resolved via the correct DNS server, but if I ping "mail" it fails. ~ (bash)$ nslookup mail Server: 254.254.254.206 Address: 254.254.254.206#53 Name: mail.example.com Address: 254.254.254.205 Note: I replaced our actual internal IP address with 254.254.254.* If I wait a few minutes (3-5 minutes), somehow it resolves itself and sends successfully. This happens multiple times a day. The /etc/hosts file on the mac boxes is the default config. ## # Host Database # # localhost is used to configure the loopback interface # when the system is booting. Do not change this entry. ## 127.0.0.1 localhost 255.255.255.255 broadcasthost ::1 localhost fe80::1%lo0 localhost Is there something about Mac clients I should know to prevent this failed DNS resolution? Client boxes are: OSX 10.7.4, 8GB RAM, i5 MacBooks Server is: Ubuntu 12.04 Server

    Read the article

  • How do I tunnel an HTTPS proxy through a virtual machine (VMWare)

    - by Kyle
    I have a personal setup at home using VMWare Workstation. I also have a set of Virtual Private Machines that run Squid, and therefore provide me HTTPS proxy tunnels. Using Proxifier, I can tunnel all traffic for given applications through these tunnels. However, I also have a few virtual machines for dev/staging/experimentation/etc. I generally just use NAT to provide Internet access to the machines, and if I need to use these proxies, I can just setup Proxifier (or a Linux equivalent) to pipe the traffic through them. No problem. But... I got to thinking: Wouldn't it be great if I could assign these proxy tunnels to a virtual machine, so that when I start up the VM, it has instant-on access through the tunnel and not my local connection? (EDIT: Of course, it would USE my local connection, but it would tunnel traffic through the proxy.) To be more clear: I want a solution that binds the proxy to a VM, so that when I start the VM, I don't have to use a proxy client to connect to the tunnel - I am already piping all traffic from that VM through that proxy. I did a bit of searching, and the closest thing I could find was this: How to route public static IP to a virtual machine on a vmware ESXi host? Which wasn't all that applicable. The proxies are protected by user/pass but do not filter by IP. Again, they are HTTPS proxies setup through Squid. Any ideas on how to make this happen? Thanks a ton.

    Read the article

  • Softfail / Failure Notice on SMTP

    - by pascal1954
    Hey, i'm searching for an answer for about 24 hours now and I still can't find any really useful help... The problem appears as the following: I'm running a debian server with Plesk 9.5.3 and qmail. Since a few weeks I'm not able to send mails to some particular servers (like web.de, aol.com). Hence I get failure notices like "Sorry, I wasn't able to establish an SMTP connection." But when I try to send mails to gmail.com - it works! Gmail only reports a softfail in the mail header like so: Received: from h1600XXX.?none? (DOMAIN2.TLD [XX.XXX.XX.XX]) Received-SPF: softfail (google.com: best guess record for domain of transitioning [email protected] does not designate 85.XXX.XX.XX as permitted sender) client-ip=85.XXX.XX.XX This sounds like a dns problem for me, but I can't get an answer for that... What makes me wondering is: h1600XXX is correct, but it should look like h1600XXX.stratoserver.net, not ?none? DOMAIN2.TLD (first line) is different from DOMAIN1 (second line). Both are hosted on this machine, but is this correct? DOMAIN1 is the one I send this mail from. Hopefully someone could help me! If you need more specific information, let me know. Thanks in advance!!! Best regards

    Read the article

  • How do I remove a printer connection without the user's intervention?

    - by 1.618
    Here's the situation: We're replacing 11 printers with newer models, and we'll be installing them on our print server and sharing them out. The plan is to share the new printers under different names than the ones they're replacing, and un-share the old ones. So I need to come up with a way to remove the client connections to old printers automatically. Clients are mostly Windows 7 with a few XP. My first idea was to call prnmngr.vbs from the login script to remove each old printer explicitly by name. The problem is that some users don't log out when they're done for the day, so I can't count on their login script running before they next need to print. I could remotely run prnmngr.vbs using SCCM, but if it's not 'impersonating' the user, I don't think it will remove their printers. Any ideas? Could I lookup how to access WMI using c# code and write a "trojan" to remove specific printers without requiring the user to do anything? (I'm only half joking). I'm open to any suggestion! Thanks!

    Read the article

  • How to set up vpn tunnel (ipsec) connection

    - by Alfwed
    I'm working with a client who wants to set up a vpn tunnel between their network and ours. They're in charge of the tunnel and to give us the access they are asking me my public IP and my LAN IP. This is what i've got when i do an ifconfig on the server i will use to connect to the vpn $ ifconfig eth0 Link encap:Ethernet HWaddr d4:ae:52:cd:xx:xx inet adr:62.210.xxx.xxx Bcast:62.210.xxx.xxx Masque:255.255.255.0 adr inet6: fe80::d6ae:52ff:xxxx:xx/64 Scope:Lien UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1 Packets reçus:55255032 erreurs:0 :779628 overruns:0 frame:0 TX packets:5419527 errors:0 dropped:0 overruns:0 carrier:0 collisions:0 lg file transmission:1000 Octets reçus:5598164393 (5.5 GB) Octets transmis:1034297288 (1.0 GB) Interruption:16 Mémoire:c0000000-c0012800 lo Link encap:Boucle locale inet adr:127.0.0.1 Masque:255.0.0.0 adr inet6: ::1/128 Scope:Hôte UP LOOPBACK RUNNING MTU:16436 Metric:1 Packets reçus:45923382 erreurs:0 :0 overruns:0 frame:0 TX packets:45923382 errors:0 dropped:0 overruns:0 carrier:0 collisions:0 lg file transmission:0 The inet adr:62.210.xxx.xxx is my public IP but it seems like i dont have any LAN IP. Can the connection work without LAN IP or should I create a private network somehow?

    Read the article

  • What is wrong with my home network? (Routing and connection issues)

    - by David
    I have a corporate laptop that was provided to me by a client and I'm having some rather odd difficulties with it when I put the laptop on my home network. When I first brought the machine home it behaved like any other laptop. Once it was connected to the network it was assigned an IP address and I could remote into it just fine using the machine name. Lately though, whenever I put this laptop on my network I am not able to ping or RDP into the machine as the host name doesn't properly resolve. Additionally I'm able to see the device and it's assigned IP address clearly in my router firmware. This gets even more strange as now when I try to ping it's IP address listed in my router, I see that it's actually trying to ping my own machine (screenshot of this very odd event below). This has actually driven me crazy to the point that I have actually replaced my router (it was behaving oddly in other ways), and I'm continuing to have these problems. The above ping capture is from the new router. As far as network goes I am now currently using an NetGear R7000 Nighthawk and I haven't customized any of the networking settings in the router just yet (installed yesterday). I would appreciate any advice possible and would be happy to provide further diagnostic information. Networking isn't my strong suit, so I'm not even sure where to begin unraveling this thing.

    Read the article

  • NginxHttpAuthBasicModule with Sinatra & Passenger

    - by scainey
    I'm serving static pages from a Sinatra application using Nginx. I've implemented Basic Authentication for one page on the site using NginxHttpAuthBasicModule, the authentication succeeds but Nginx doesn't resolve the link. Error log gives - 2010/03/22 12:15:19 [error] 7143#0: *2902 open() "/home/me/live/mysite_home/public /mypage" failed (2: No such file or directory), client: 82.71.18.122, server: mysite.com, request: "GET /mypage HTTP/1.1", host: "mysite.com" The actual file is found at: /home/me/live/mysite_home/live/mypage.erb The configuration file is: server { listen 80; server_name mysite.com; root /home/me/live/mysite_home/public; passenger_enabled on; location /mypage { auth_basic "Restricted"; auth_basic_user_file htpasswd; } } server { listen 443; server_name mysite.com; root /home/me/live/mysite_home/public; passenger_enabled on; ssl on; ssl_certificate /etc/nginx/conf/certs/server.crt; ssl_certificate_key /etc/nginx/conf/certs/server.key; keepalive_timeout 70; location /mypage { auth_basic "Restricted"; auth_basic_user_file htpasswd; } } Not sure if this is a Sinatra, Passenger or Nginx thing, or if I'm just missing something.

    Read the article

  • Accessing CIFS shares from an OS X machine incredibly slow

    - by Aron Rotteveel
    This is a longshot, because this issue seems over-reported and unanswered on the internet (see references below), but it is about time this issue is permanently solved. The facts: Server: Windows Server 2008, acting as a file server Client: OS X Lion 10.7.3. Method of connecting: directly via IP through Finder: smb://192.168.1.100/share The problem: The initial connection attempt takes about a minute. After the connection is made, it takes one more minute to show the directories in Finder. After navigating to any other directory, it takes several seconds/minutes to parse the directory, seemingly based on the size of the contents. Actually, my entire Finder has this problem after connecting. When using Finder to show my desktop, it can literally take up to a minute to load. Obviously, this is not right. I have no clue how to fix this and would appreciate any help I can get. I am unsure about other relevant information I can provide, but if there is any, please let me know so I can update the post. I seem to be not the only one having this problem: Most importantly, an apple.stackexchange.com entry. Unsolved and unanswered. Several users on the Apple support forums. Users on EduGeek.

    Read the article

  • Private subnet for VM server host-only network

    - by Derek Pressnall
    At my current job, we distribute a product based on a Linux server with multiple VMs defined (using KVM / libvirt). We are planning to expose limited ports to the customer's network, and use iptables to direct inbound traffic to the appropriate internal VM. My question: is there a class of private subnets that I can use for the internal host-only network that is least likely to conflict with a client IP subnet? Specifically, if I choose a /24 out of any of the RFC-1918 defined private subnets (such as 192.168.x.x), there is a chance of conflicting with a customer-used range. I noticed that several current VM implementations default to 192.168.122.x -- is this due to an RFC that I'm not familiar with, and therefore this is a safe range to use (that most network admins would avoid)? Or did the various VM vendors just pick that range randomly? I guess I'm looking for an IP range that is more private than the existing private (RFC1918) addresses. The only other thought I had was to use one of the "Test Net" IP ranges reserved for documentation purposes (RFC 5737). Note, that I'm not worried about a customer's network blocking these IPs, as this is only internal to our server (packets get NATted before leaving the box). However this does seem more unorthodox than just sticking with the default 192.168.122.x/24 subnet.

    Read the article

  • Intermittent 403 errors when using allow to limit access to url with both explicit IP and SetEnvIf

    - by rbieber
    We are running Apache 2.2.22 on a Solaris 10 environment. We have a specific URL that we want to limit access to by IP. We recently implemented a CDN and now have the added complexity that the IP's that a request are shown to be coming from are actually the CDN servers and not the ultimate end user. In the case that we need to back the CDN out, we want to handle the case where either the CDN is forwarding the request, or the ultimate client is sending the request directly. The CDN sends the end user IP address in an HTTP header (for this scenario that header is called "User-IP"). Here is the configuration that we have put in place: SetEnvIf User-IP (\d+\.\d+\.\d+\.\d+) REAL_USER_IP=$1 SetEnvIf REAL_USER_IP "(10\.1\.2\.3|192\.168\..+)" access_allowed=1 <Location /uri/> Order deny,allow Allow from 10.1.2.3 192.168. allow from env=access_allowed Deny from all </Location> This seems to work fine for a time, however at some point the web server starts serving 403 errors to the end user - so for some reason it is restricting access. The odd thing is that a bounce of the web server seems to resolve the issue, but only for a time - then the behavior comes back. It might be worthwhile to note as well that this URL is delegated to a JBoss server via mod_jk. The denial of access is, however; confirmed to be at the Apache layer and the issue only seems to happen after the server has been running for some time.

    Read the article

  • Help - since adding an elastic load balancer to my EC2 web application I cannot connect with the MySQL database (not in AWS)

    - by undefined
    I have a web application that uses an EC2 instance to receive uploaded images, resize and store on S3 and update my MySQL database with the image record. This database is hosted outside Amazon Web Services and so obviously involves communication between the EC2 instance and the database. Images are posted to the upload server from a Flash client which receives the IP address of the upload server when it is loaded and so sends images to 1.12.23.34/resize_script.php This has worked great .. until i started to try and include a load balancer. Since the ELBs do not use an IP address but a DNS address I am now passing this to Flash. Now when I upload images I get the following response from the server - Could not connect to MySQL: Lost connection to MySQL server at 'reading initial communication packet', system error: 111 What might be causing the lost connection to MySQL server. Is there any additional steps I need to take to allow my upload servers to be load balanced? I have set the host property of my MySQL privileges for this user to % any pointers greatly appreciated thanks.

    Read the article

  • SSH very slow when connecting from external [closed]

    - by wnstnsmth
    Possible Duplicate: ssh delay when connecting We have a CentOS server that we use for internal testing purposes, which has sshd enabled. When I (as a developer) am at the company, I use ssh [email protected] to connect to it - and it works flawlessly. Now, in order to work from home, accessing the server via the company's static IP, we set up another port for ssh, 2020. So I execute ssh -p 2020 [email protected] and am immediately granted for a password. After entering the password, it takes up to 30 seconds until I can access the server. Same is with SFTP (i.e. uploading files takes about 30 seconds until it begins to transfer). As you can imagine, if you have to regularly upload files to a webserver via SFTP, this is very tedious. So I looked at similar questions and thus edited the sshd_config file on the server, setting UseDNS to "no" and GSSAPIAuthentication to "no" (this one also in ssh_config on the client) - it did not work.. Please have a look at the -vvv output when externally accessing the server: ssh -p 2020 -vvv [email protected] PasteBin: ssh What could it be? Do you need more info?

    Read the article

  • Best practice ACLs to prepare for auditors?

    - by Nic
    An auditor will be visiting our office soon, and they will require read-only access to our data. I have already created a domain user account and placed them into a group called "Auditors". We have a single fileserver (Windows Server 2008) with about ten shared folders. All of the shares are set up to allow full access to authenticated users, and access restrictions are implemented with NTFS ACL's. Most folders allow full access to the "Domain Users" group, but the auditor won't need to make any changes. It takes several hours to update NTFS ACL's since we have about one million files. Here are the options that I am currently considering. Create a "staff" group to assign read/write instead of "Domain Users" at the share level Create a "staff" group to assign read/write instead of "Domain Users" at the NTFS level Deny access to the "Auditors" group at the share level Deny access to the "Auditors" group at the NTFS level Accept the status quo and trust the auditor. I will probably need to configure similar users in the future, as some of our contractors require a domain account but shouldn't be able to modify our client data. Is there a best practice for this?

    Read the article

  • How to ensure local file is up-to-date or ahead (dropbox sync) before truecrypt auto-mount it?

    - by user620965
    There are a lot tutorials out there that states that dropbox build-in encryption is not secure enought. That tutorials recommands to sync a truecrypt container file to have all files in it securely encrypted. This setup is know to be limited. You can NOT have that truecrypt container file mounted on the same time on more than one location - if you have inserted changes to the contents of the container in more then one location at a time then this setup produces a conflict on the container file in the dropbox system - resulting in one container file for each location. In my case that issue is not relevant - i do not use my data on more than one location at a time. I want to use the auto-mount feature of truecrypt on startup of windows 7 to have a zero configuration environment - and start working right away. But i want to ensure that the local truecrypt container file is up-to-date before truecrypt mounts it automatically - imagine you updated the contents of the container on your primary location and your secondary location was off for a long time. In that case it can take "a long time" till dropbox sync is complete (e.g. depending on your internet connection and the size of the container file). There is a option in truecrypt that ensures that truecrypt do not update the timestamp of the container file - which speeds up the sync, because dropbox client is doing a differential sync then instead of a time consuming full-sync. That is an improvement to that setup, but this do not fix my issue. The question is how to make the auto-mount function wait for the container file to be up-to-date (updated by dropbox)? In contrast: if the file was changed local, but remote file (in the dropbox cloud system) is still old (not jet updated by the sync process / or process is progress), should not make truecrypt to wait for the sync. Suggestions?

    Read the article

  • SSH access to VM on windows 8 hyper-v

    - by samw
    I'm currently attending University and prefer a Linux environment to do much of my work, but all I have is a ThinkPad running Windows 8 Pro. Cygwin is nice, but it leaves me missing things like apt-get. My latest solution is to run an Ubuntu 12.04 VM with Windows 8's Client Hyper-V and use Cygwin for SSH access. I've looked everywhere online trying to set this up, but I haven't found much help. I've done this before using VirtualBox, so I figured this would be possible as well. Could anyone provide advice for setting up this environment? I'm completely uninitiated to Linux networking, virtual networking, and... pretty much all networking configuration, so this has been quite a challenge for me. What I've done so far: Created an external virtual switch to my wireless NIC. With this, I could successfully SSH to the VM with the leased IP address. But without a static IP, I would soon get disconnected. Created an internal virtual switch and attempt to "share" my main internet connection. (I was following the description on this page) Thank you all in advance!

    Read the article

  • Introduction to the ASP.NET Web API

    - by Stephen.Walther
    I am a huge fan of Ajax. If you want to create a great experience for the users of your website – regardless of whether you are building an ASP.NET MVC or an ASP.NET Web Forms site — then you need to use Ajax. Otherwise, you are just being cruel to your customers. We use Ajax extensively in several of the ASP.NET applications that my company, Superexpert.com, builds. We expose data from the server as JSON and use jQuery to retrieve and update that data from the browser. One challenge, when building an ASP.NET website, is deciding on which technology to use to expose JSON data from the server. For example, how do you expose a list of products from the server as JSON so you can retrieve the list of products with jQuery? You have a number of options (too many options) including ASMX Web services, WCF Web Services, ASHX Generic Handlers, WCF Data Services, and MVC controller actions. Fortunately, the world has just been simplified. With the release of ASP.NET 4 Beta, Microsoft has introduced a new technology for exposing JSON from the server named the ASP.NET Web API. You can use the ASP.NET Web API with both ASP.NET MVC and ASP.NET Web Forms applications. The goal of this blog post is to provide you with a brief overview of the features of the new ASP.NET Web API. You learn how to use the ASP.NET Web API to retrieve, insert, update, and delete database records with jQuery. We also discuss how you can perform form validation when using the Web API and use OData when using the Web API. Creating an ASP.NET Web API Controller The ASP.NET Web API exposes JSON data through a new type of controller called an API controller. You can add an API controller to an existing ASP.NET MVC 4 project through the standard Add Controller dialog box. Right-click your Controllers folder and select Add, Controller. In the dialog box, name your controller MovieController and select the Empty API controller template: A brand new API controller looks like this: using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; using System.Web.Http; namespace MyWebAPIApp.Controllers { public class MovieController : ApiController { } } An API controller, unlike a standard MVC controller, derives from the base ApiController class instead of the base Controller class. Using jQuery to Retrieve, Insert, Update, and Delete Data Let’s create an Ajaxified Movie Database application. We’ll retrieve, insert, update, and delete movies using jQuery with the MovieController which we just created. Our Movie model class looks like this: namespace MyWebAPIApp.Models { public class Movie { public int Id { get; set; } public string Title { get; set; } public string Director { get; set; } } } Our application will consist of a single HTML page named Movies.html. We’ll place all of our jQuery code in the Movies.html page. Getting a Single Record with the ASP.NET Web API To support retrieving a single movie from the server, we need to add a Get method to our API controller: using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; using MyWebAPIApp.Models; namespace MyWebAPIApp.Controllers { public class MovieController : ApiController { public Movie GetMovie(int id) { // Return movie by id if (id == 1) { return new Movie { Id = 1, Title = "Star Wars", Director = "Lucas" }; } // Otherwise, movie was not found throw new HttpResponseException(HttpStatusCode.NotFound); } } } In the code above, the GetMovie() method accepts the Id of a movie. If the Id has the value 1 then the method returns the movie Star Wars. Otherwise, the method throws an exception and returns 404 Not Found HTTP status code. After building your project, you can invoke the MovieController.GetMovie() method by entering the following URL in your web browser address bar: http://localhost:[port]/api/movie/1 (You’ll need to enter the correct randomly generated port). In the URL api/movie/1, the first “api” segment indicates that this is a Web API route. The “movie” segment indicates that the MovieController should be invoked. You do not specify the name of the action. Instead, the HTTP method used to make the request – GET, POST, PUT, DELETE — is used to identify the action to invoke. The ASP.NET Web API uses different routing conventions than normal ASP.NET MVC controllers. When you make an HTTP GET request then any API controller method with a name that starts with “GET” is invoked. So, we could have called our API controller action GetPopcorn() instead of GetMovie() and it would still be invoked by the URL api/movie/1. The default route for the Web API is defined in the Global.asax file and it looks like this: routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); We can invoke our GetMovie() controller action with the jQuery code in the following HTML page: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Get Movie</title> </head> <body> <div> Title: <span id="title"></span> </div> <div> Director: <span id="director"></span> </div> <script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script> <script type="text/javascript"> getMovie(1, function (movie) { $("#title").html(movie.Title); $("#director").html(movie.Director); }); function getMovie(id, callback) { $.ajax({ url: "/api/Movie", data: { id: id }, type: "GET", contentType: "application/json;charset=utf-8", statusCode: { 200: function (movie) { callback(movie); }, 404: function () { alert("Not Found!"); } } }); } </script> </body> </html> In the code above, the jQuery $.ajax() method is used to invoke the GetMovie() method. Notice that the Ajax call handles two HTTP response codes. When the GetMove() method successfully returns a movie, the method returns a 200 status code. In that case, the details of the movie are displayed in the HTML page. Otherwise, if the movie is not found, the GetMovie() method returns a 404 status code. In that case, the page simply displays an alert box indicating that the movie was not found (hopefully, you would implement something more graceful in an actual application). You can use your browser’s Developer Tools to see what is going on in the background when you open the HTML page (hit F12 in the most recent version of most browsers). For example, you can use the Network tab in Google Chrome to see the Ajax request which invokes the GetMovie() method: Getting a Set of Records with the ASP.NET Web API Let’s modify our Movie API controller so that it returns a collection of movies. The following Movie controller has a new ListMovies() method which returns a (hard-coded) collection of movies: using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; using MyWebAPIApp.Models; namespace MyWebAPIApp.Controllers { public class MovieController : ApiController { public IEnumerable<Movie> ListMovies() { return new List<Movie> { new Movie {Id=1, Title="Star Wars", Director="Lucas"}, new Movie {Id=1, Title="King Kong", Director="Jackson"}, new Movie {Id=1, Title="Memento", Director="Nolan"} }; } } } Because we named our action ListMovies(), the default Web API route will never match it. Therefore, we need to add the following custom route to our Global.asax file (at the top of the RegisterRoutes() method): routes.MapHttpRoute( name: "ActionApi", routeTemplate: "api/{controller}/{action}/{id}", defaults: new { id = RouteParameter.Optional } ); This route enables us to invoke the ListMovies() method with the URL /api/movie/listmovies. Now that we have exposed our collection of movies from the server, we can retrieve and display the list of movies using jQuery in our HTML page: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>List Movies</title> </head> <body> <div id="movies"></div> <script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script> <script type="text/javascript"> listMovies(function (movies) { var strMovies=""; $.each(movies, function (index, movie) { strMovies += "<div>" + movie.Title + "</div>"; }); $("#movies").html(strMovies); }); function listMovies(callback) { $.ajax({ url: "/api/Movie/ListMovies", data: {}, type: "GET", contentType: "application/json;charset=utf-8", }).then(function(movies){ callback(movies); }); } </script> </body> </html>     Inserting a Record with the ASP.NET Web API Now let’s modify our Movie API controller so it supports creating new records: public HttpResponseMessage<Movie> PostMovie(Movie movieToCreate) { // Add movieToCreate to the database and update primary key movieToCreate.Id = 23; // Build a response that contains the location of the new movie var response = new HttpResponseMessage<Movie>(movieToCreate, HttpStatusCode.Created); var relativePath = "/api/movie/" + movieToCreate.Id; response.Headers.Location = new Uri(Request.RequestUri, relativePath); return response; } The PostMovie() method in the code above accepts a movieToCreate parameter. We don’t actually store the new movie anywhere. In real life, you will want to call a service method to store the new movie in a database. When you create a new resource, such as a new movie, you should return the location of the new resource. In the code above, the URL where the new movie can be retrieved is assigned to the Location header returned in the PostMovie() response. Because the name of our method starts with “Post”, we don’t need to create a custom route. The PostMovie() method can be invoked with the URL /Movie/PostMovie – just as long as the method is invoked within the context of a HTTP POST request. The following HTML page invokes the PostMovie() method. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Create Movie</title> </head> <body> <script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script> <script type="text/javascript"> var movieToCreate = { title: "The Hobbit", director: "Jackson" }; createMovie(movieToCreate, function (newMovie) { alert("New movie created with an Id of " + newMovie.Id); }); function createMovie(movieToCreate, callback) { $.ajax({ url: "/api/Movie", data: JSON.stringify( movieToCreate ), type: "POST", contentType: "application/json;charset=utf-8", statusCode: { 201: function (newMovie) { callback(newMovie); } } }); } </script> </body> </html> This page creates a new movie (the Hobbit) by calling the createMovie() method. The page simply displays the Id of the new movie: The HTTP Post operation is performed with the following call to the jQuery $.ajax() method: $.ajax({ url: "/api/Movie", data: JSON.stringify( movieToCreate ), type: "POST", contentType: "application/json;charset=utf-8", statusCode: { 201: function (newMovie) { callback(newMovie); } } }); Notice that the type of Ajax request is a POST request. This is required to match the PostMovie() method. Notice, furthermore, that the new movie is converted into JSON using JSON.stringify(). The JSON.stringify() method takes a JavaScript object and converts it into a JSON string. Finally, notice that success is represented with a 201 status code. The HttpStatusCode.Created value returned from the PostMovie() method returns a 201 status code. Updating a Record with the ASP.NET Web API Here’s how we can modify the Movie API controller to support updating an existing record. In this case, we need to create a PUT method to handle an HTTP PUT request: public void PutMovie(Movie movieToUpdate) { if (movieToUpdate.Id == 1) { // Update the movie in the database return; } // If you can't find the movie to update throw new HttpResponseException(HttpStatusCode.NotFound); } Unlike our PostMovie() method, the PutMovie() method does not return a result. The action either updates the database or, if the movie cannot be found, returns an HTTP Status code of 404. The following HTML page illustrates how you can invoke the PutMovie() method: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Put Movie</title> </head> <body> <script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script> <script type="text/javascript"> var movieToUpdate = { id: 1, title: "The Hobbit", director: "Jackson" }; updateMovie(movieToUpdate, function () { alert("Movie updated!"); }); function updateMovie(movieToUpdate, callback) { $.ajax({ url: "/api/Movie", data: JSON.stringify(movieToUpdate), type: "PUT", contentType: "application/json;charset=utf-8", statusCode: { 200: function () { callback(); }, 404: function () { alert("Movie not found!"); } } }); } </script> </body> </html> Deleting a Record with the ASP.NET Web API Here’s the code for deleting a movie: public HttpResponseMessage DeleteMovie(int id) { // Delete the movie from the database // Return status code return new HttpResponseMessage(HttpStatusCode.NoContent); } This method simply deletes the movie (well, not really, but pretend that it does) and returns a No Content status code (204). The following page illustrates how you can invoke the DeleteMovie() action: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Delete Movie</title> </head> <body> <script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script> <script type="text/javascript"> deleteMovie(1, function () { alert("Movie deleted!"); }); function deleteMovie(id, callback) { $.ajax({ url: "/api/Movie", data: JSON.stringify({id:id}), type: "DELETE", contentType: "application/json;charset=utf-8", statusCode: { 204: function () { callback(); } } }); } </script> </body> </html> Performing Validation How do you perform form validation when using the ASP.NET Web API? Because validation in ASP.NET MVC is driven by the Default Model Binder, and because the Web API uses the Default Model Binder, you get validation for free. Let’s modify our Movie class so it includes some of the standard validation attributes: using System.ComponentModel.DataAnnotations; namespace MyWebAPIApp.Models { public class Movie { public int Id { get; set; } [Required(ErrorMessage="Title is required!")] [StringLength(5, ErrorMessage="Title cannot be more than 5 characters!")] public string Title { get; set; } [Required(ErrorMessage="Director is required!")] public string Director { get; set; } } } In the code above, the Required validation attribute is used to make both the Title and Director properties required. The StringLength attribute is used to require the length of the movie title to be no more than 5 characters. Now let’s modify our PostMovie() action to validate a movie before adding the movie to the database: public HttpResponseMessage PostMovie(Movie movieToCreate) { // Validate movie if (!ModelState.IsValid) { var errors = new JsonArray(); foreach (var prop in ModelState.Values) { if (prop.Errors.Any()) { errors.Add(prop.Errors.First().ErrorMessage); } } return new HttpResponseMessage<JsonValue>(errors, HttpStatusCode.BadRequest); } // Add movieToCreate to the database and update primary key movieToCreate.Id = 23; // Build a response that contains the location of the new movie var response = new HttpResponseMessage<Movie>(movieToCreate, HttpStatusCode.Created); var relativePath = "/api/movie/" + movieToCreate.Id; response.Headers.Location = new Uri(Request.RequestUri, relativePath); return response; } If ModelState.IsValid has the value false then the errors in model state are copied to a new JSON array. Each property – such as the Title and Director property — can have multiple errors. In the code above, only the first error message is copied over. The JSON array is returned with a Bad Request status code (400 status code). The following HTML page illustrates how you can invoke our modified PostMovie() action and display any error messages: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Create Movie</title> </head> <body> <script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script> <script type="text/javascript"> var movieToCreate = { title: "The Hobbit", director: "" }; createMovie(movieToCreate, function (newMovie) { alert("New movie created with an Id of " + newMovie.Id); }, function (errors) { var strErrors = ""; $.each(errors, function(index, err) { strErrors += "*" + err + "\n"; }); alert(strErrors); } ); function createMovie(movieToCreate, success, fail) { $.ajax({ url: "/api/Movie", data: JSON.stringify(movieToCreate), type: "POST", contentType: "application/json;charset=utf-8", statusCode: { 201: function (newMovie) { success(newMovie); }, 400: function (xhr) { var errors = JSON.parse(xhr.responseText); fail(errors); } } }); } </script> </body> </html> The createMovie() function performs an Ajax request and handles either a 201 or a 400 status code from the response. If a 201 status code is returned then there were no validation errors and the new movie was created. If, on the other hand, a 400 status code is returned then there was a validation error. The validation errors are retrieved from the XmlHttpRequest responseText property. The error messages are displayed in an alert: (Please don’t use JavaScript alert dialogs to display validation errors, I just did it this way out of pure laziness) This validation code in our PostMovie() method is pretty generic. There is nothing specific about this code to the PostMovie() method. In the following video, Jon Galloway demonstrates how to create a global Validation filter which can be used with any API controller action: http://www.asp.net/web-api/overview/web-api-routing-and-actions/video-custom-validation His validation filter looks like this: using System.Json; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http.Controllers; using System.Web.Http.Filters; namespace MyWebAPIApp.Filters { public class ValidationActionFilter:ActionFilterAttribute { public override void OnActionExecuting(HttpActionContext actionContext) { var modelState = actionContext.ModelState; if (!modelState.IsValid) { dynamic errors = new JsonObject(); foreach (var key in modelState.Keys) { var state = modelState[key]; if (state.Errors.Any()) { errors[key] = state.Errors.First().ErrorMessage; } } actionContext.Response = new HttpResponseMessage<JsonValue>(errors, HttpStatusCode.BadRequest); } } } } And you can register the validation filter in the Application_Start() method in the Global.asax file like this: GlobalConfiguration.Configuration.Filters.Add(new ValidationActionFilter()); After you register the Validation filter, validation error messages are returned from any API controller action method automatically when validation fails. You don’t need to add any special logic to any of your API controller actions to take advantage of the filter. Querying using OData The OData protocol is an open protocol created by Microsoft which enables you to perform queries over the web. The official website for OData is located here: http://odata.org For example, here are some of the query options which you can use with OData: · $orderby – Enables you to retrieve results in a certain order. · $top – Enables you to retrieve a certain number of results. · $skip – Enables you to skip over a certain number of results (use with $top for paging). · $filter – Enables you to filter the results returned. The ASP.NET Web API supports a subset of the OData protocol. You can use all of the query options listed above when interacting with an API controller. The only requirement is that the API controller action returns its data as IQueryable. For example, the following Movie controller has an action named GetMovies() which returns an IQueryable of movies: public IQueryable<Movie> GetMovies() { return new List<Movie> { new Movie {Id=1, Title="Star Wars", Director="Lucas"}, new Movie {Id=2, Title="King Kong", Director="Jackson"}, new Movie {Id=3, Title="Willow", Director="Lucas"}, new Movie {Id=4, Title="Shrek", Director="Smith"}, new Movie {Id=5, Title="Memento", Director="Nolan"} }.AsQueryable(); } If you enter the following URL in your browser: /api/movie?$top=2&$orderby=Title Then you will limit the movies returned to the top 2 in order of the movie Title. You will get the following results: By using the $top option in combination with the $skip option, you can enable client-side paging. For example, you can use $top and $skip to page through thousands of products, 10 products at a time. The $filter query option is very powerful. You can use this option to filter the results from a query. Here are some examples: Return every movie directed by Lucas: /api/movie?$filter=Director eq ‘Lucas’ Return every movie which has a title which starts with ‘S’: /api/movie?$filter=startswith(Title,’S') Return every movie which has an Id greater than 2: /api/movie?$filter=Id gt 2 The complete documentation for the $filter option is located here: http://www.odata.org/developers/protocols/uri-conventions#FilterSystemQueryOption Summary The goal of this blog entry was to provide you with an overview of the new ASP.NET Web API introduced with the Beta release of ASP.NET 4. In this post, I discussed how you can retrieve, insert, update, and delete data by using jQuery with the Web API. I also discussed how you can use the standard validation attributes with the Web API. You learned how to return validation error messages to the client and display the error messages using jQuery. Finally, we briefly discussed how the ASP.NET Web API supports the OData protocol. For example, you learned how to filter records returned from an API controller action by using the $filter query option. I’m excited about the new Web API. This is a feature which I expect to use with almost every ASP.NET application which I build in the future.

    Read the article

  • Introduction to the ASP.NET Web API

    - by Stephen.Walther
    I am a huge fan of Ajax. If you want to create a great experience for the users of your website – regardless of whether you are building an ASP.NET MVC or an ASP.NET Web Forms site — then you need to use Ajax. Otherwise, you are just being cruel to your customers. We use Ajax extensively in several of the ASP.NET applications that my company, Superexpert.com, builds. We expose data from the server as JSON and use jQuery to retrieve and update that data from the browser. One challenge, when building an ASP.NET website, is deciding on which technology to use to expose JSON data from the server. For example, how do you expose a list of products from the server as JSON so you can retrieve the list of products with jQuery? You have a number of options (too many options) including ASMX Web services, WCF Web Services, ASHX Generic Handlers, WCF Data Services, and MVC controller actions. Fortunately, the world has just been simplified. With the release of ASP.NET 4 Beta, Microsoft has introduced a new technology for exposing JSON from the server named the ASP.NET Web API. You can use the ASP.NET Web API with both ASP.NET MVC and ASP.NET Web Forms applications. The goal of this blog post is to provide you with a brief overview of the features of the new ASP.NET Web API. You learn how to use the ASP.NET Web API to retrieve, insert, update, and delete database records with jQuery. We also discuss how you can perform form validation when using the Web API and use OData when using the Web API. Creating an ASP.NET Web API Controller The ASP.NET Web API exposes JSON data through a new type of controller called an API controller. You can add an API controller to an existing ASP.NET MVC 4 project through the standard Add Controller dialog box. Right-click your Controllers folder and select Add, Controller. In the dialog box, name your controller MovieController and select the Empty API controller template: A brand new API controller looks like this: using System; using System.Collections.Generic; using System.Linq; using System.Net.Http; using System.Web.Http; namespace MyWebAPIApp.Controllers { public class MovieController : ApiController { } } An API controller, unlike a standard MVC controller, derives from the base ApiController class instead of the base Controller class. Using jQuery to Retrieve, Insert, Update, and Delete Data Let’s create an Ajaxified Movie Database application. We’ll retrieve, insert, update, and delete movies using jQuery with the MovieController which we just created. Our Movie model class looks like this: namespace MyWebAPIApp.Models { public class Movie { public int Id { get; set; } public string Title { get; set; } public string Director { get; set; } } } Our application will consist of a single HTML page named Movies.html. We’ll place all of our jQuery code in the Movies.html page. Getting a Single Record with the ASP.NET Web API To support retrieving a single movie from the server, we need to add a Get method to our API controller: using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; using MyWebAPIApp.Models; namespace MyWebAPIApp.Controllers { public class MovieController : ApiController { public Movie GetMovie(int id) { // Return movie by id if (id == 1) { return new Movie { Id = 1, Title = "Star Wars", Director = "Lucas" }; } // Otherwise, movie was not found throw new HttpResponseException(HttpStatusCode.NotFound); } } } In the code above, the GetMovie() method accepts the Id of a movie. If the Id has the value 1 then the method returns the movie Star Wars. Otherwise, the method throws an exception and returns 404 Not Found HTTP status code. After building your project, you can invoke the MovieController.GetMovie() method by entering the following URL in your web browser address bar: http://localhost:[port]/api/movie/1 (You’ll need to enter the correct randomly generated port). In the URL api/movie/1, the first “api” segment indicates that this is a Web API route. The “movie” segment indicates that the MovieController should be invoked. You do not specify the name of the action. Instead, the HTTP method used to make the request – GET, POST, PUT, DELETE — is used to identify the action to invoke. The ASP.NET Web API uses different routing conventions than normal ASP.NET MVC controllers. When you make an HTTP GET request then any API controller method with a name that starts with “GET” is invoked. So, we could have called our API controller action GetPopcorn() instead of GetMovie() and it would still be invoked by the URL api/movie/1. The default route for the Web API is defined in the Global.asax file and it looks like this: routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); We can invoke our GetMovie() controller action with the jQuery code in the following HTML page: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Get Movie</title> </head> <body> <div> Title: <span id="title"></span> </div> <div> Director: <span id="director"></span> </div> <script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script> <script type="text/javascript"> getMovie(1, function (movie) { $("#title").html(movie.Title); $("#director").html(movie.Director); }); function getMovie(id, callback) { $.ajax({ url: "/api/Movie", data: { id: id }, type: "GET", contentType: "application/json;charset=utf-8", statusCode: { 200: function (movie) { callback(movie); }, 404: function () { alert("Not Found!"); } } }); } </script> </body> </html> In the code above, the jQuery $.ajax() method is used to invoke the GetMovie() method. Notice that the Ajax call handles two HTTP response codes. When the GetMove() method successfully returns a movie, the method returns a 200 status code. In that case, the details of the movie are displayed in the HTML page. Otherwise, if the movie is not found, the GetMovie() method returns a 404 status code. In that case, the page simply displays an alert box indicating that the movie was not found (hopefully, you would implement something more graceful in an actual application). You can use your browser’s Developer Tools to see what is going on in the background when you open the HTML page (hit F12 in the most recent version of most browsers). For example, you can use the Network tab in Google Chrome to see the Ajax request which invokes the GetMovie() method: Getting a Set of Records with the ASP.NET Web API Let’s modify our Movie API controller so that it returns a collection of movies. The following Movie controller has a new ListMovies() method which returns a (hard-coded) collection of movies: using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; using MyWebAPIApp.Models; namespace MyWebAPIApp.Controllers { public class MovieController : ApiController { public IEnumerable<Movie> ListMovies() { return new List<Movie> { new Movie {Id=1, Title="Star Wars", Director="Lucas"}, new Movie {Id=1, Title="King Kong", Director="Jackson"}, new Movie {Id=1, Title="Memento", Director="Nolan"} }; } } } Because we named our action ListMovies(), the default Web API route will never match it. Therefore, we need to add the following custom route to our Global.asax file (at the top of the RegisterRoutes() method): routes.MapHttpRoute( name: "ActionApi", routeTemplate: "api/{controller}/{action}/{id}", defaults: new { id = RouteParameter.Optional } ); This route enables us to invoke the ListMovies() method with the URL /api/movie/listmovies. Now that we have exposed our collection of movies from the server, we can retrieve and display the list of movies using jQuery in our HTML page: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>List Movies</title> </head> <body> <div id="movies"></div> <script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script> <script type="text/javascript"> listMovies(function (movies) { var strMovies=""; $.each(movies, function (index, movie) { strMovies += "<div>" + movie.Title + "</div>"; }); $("#movies").html(strMovies); }); function listMovies(callback) { $.ajax({ url: "/api/Movie/ListMovies", data: {}, type: "GET", contentType: "application/json;charset=utf-8", }).then(function(movies){ callback(movies); }); } </script> </body> </html>     Inserting a Record with the ASP.NET Web API Now let’s modify our Movie API controller so it supports creating new records: public HttpResponseMessage<Movie> PostMovie(Movie movieToCreate) { // Add movieToCreate to the database and update primary key movieToCreate.Id = 23; // Build a response that contains the location of the new movie var response = new HttpResponseMessage<Movie>(movieToCreate, HttpStatusCode.Created); var relativePath = "/api/movie/" + movieToCreate.Id; response.Headers.Location = new Uri(Request.RequestUri, relativePath); return response; } The PostMovie() method in the code above accepts a movieToCreate parameter. We don’t actually store the new movie anywhere. In real life, you will want to call a service method to store the new movie in a database. When you create a new resource, such as a new movie, you should return the location of the new resource. In the code above, the URL where the new movie can be retrieved is assigned to the Location header returned in the PostMovie() response. Because the name of our method starts with “Post”, we don’t need to create a custom route. The PostMovie() method can be invoked with the URL /Movie/PostMovie – just as long as the method is invoked within the context of a HTTP POST request. The following HTML page invokes the PostMovie() method. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Create Movie</title> </head> <body> <script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script> <script type="text/javascript"> var movieToCreate = { title: "The Hobbit", director: "Jackson" }; createMovie(movieToCreate, function (newMovie) { alert("New movie created with an Id of " + newMovie.Id); }); function createMovie(movieToCreate, callback) { $.ajax({ url: "/api/Movie", data: JSON.stringify( movieToCreate ), type: "POST", contentType: "application/json;charset=utf-8", statusCode: { 201: function (newMovie) { callback(newMovie); } } }); } </script> </body> </html> This page creates a new movie (the Hobbit) by calling the createMovie() method. The page simply displays the Id of the new movie: The HTTP Post operation is performed with the following call to the jQuery $.ajax() method: $.ajax({ url: "/api/Movie", data: JSON.stringify( movieToCreate ), type: "POST", contentType: "application/json;charset=utf-8", statusCode: { 201: function (newMovie) { callback(newMovie); } } }); Notice that the type of Ajax request is a POST request. This is required to match the PostMovie() method. Notice, furthermore, that the new movie is converted into JSON using JSON.stringify(). The JSON.stringify() method takes a JavaScript object and converts it into a JSON string. Finally, notice that success is represented with a 201 status code. The HttpStatusCode.Created value returned from the PostMovie() method returns a 201 status code. Updating a Record with the ASP.NET Web API Here’s how we can modify the Movie API controller to support updating an existing record. In this case, we need to create a PUT method to handle an HTTP PUT request: public void PutMovie(Movie movieToUpdate) { if (movieToUpdate.Id == 1) { // Update the movie in the database return; } // If you can't find the movie to update throw new HttpResponseException(HttpStatusCode.NotFound); } Unlike our PostMovie() method, the PutMovie() method does not return a result. The action either updates the database or, if the movie cannot be found, returns an HTTP Status code of 404. The following HTML page illustrates how you can invoke the PutMovie() method: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Put Movie</title> </head> <body> <script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script> <script type="text/javascript"> var movieToUpdate = { id: 1, title: "The Hobbit", director: "Jackson" }; updateMovie(movieToUpdate, function () { alert("Movie updated!"); }); function updateMovie(movieToUpdate, callback) { $.ajax({ url: "/api/Movie", data: JSON.stringify(movieToUpdate), type: "PUT", contentType: "application/json;charset=utf-8", statusCode: { 200: function () { callback(); }, 404: function () { alert("Movie not found!"); } } }); } </script> </body> </html> Deleting a Record with the ASP.NET Web API Here’s the code for deleting a movie: public HttpResponseMessage DeleteMovie(int id) { // Delete the movie from the database // Return status code return new HttpResponseMessage(HttpStatusCode.NoContent); } This method simply deletes the movie (well, not really, but pretend that it does) and returns a No Content status code (204). The following page illustrates how you can invoke the DeleteMovie() action: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Delete Movie</title> </head> <body> <script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script> <script type="text/javascript"> deleteMovie(1, function () { alert("Movie deleted!"); }); function deleteMovie(id, callback) { $.ajax({ url: "/api/Movie", data: JSON.stringify({id:id}), type: "DELETE", contentType: "application/json;charset=utf-8", statusCode: { 204: function () { callback(); } } }); } </script> </body> </html> Performing Validation How do you perform form validation when using the ASP.NET Web API? Because validation in ASP.NET MVC is driven by the Default Model Binder, and because the Web API uses the Default Model Binder, you get validation for free. Let’s modify our Movie class so it includes some of the standard validation attributes: using System.ComponentModel.DataAnnotations; namespace MyWebAPIApp.Models { public class Movie { public int Id { get; set; } [Required(ErrorMessage="Title is required!")] [StringLength(5, ErrorMessage="Title cannot be more than 5 characters!")] public string Title { get; set; } [Required(ErrorMessage="Director is required!")] public string Director { get; set; } } } In the code above, the Required validation attribute is used to make both the Title and Director properties required. The StringLength attribute is used to require the length of the movie title to be no more than 5 characters. Now let’s modify our PostMovie() action to validate a movie before adding the movie to the database: public HttpResponseMessage PostMovie(Movie movieToCreate) { // Validate movie if (!ModelState.IsValid) { var errors = new JsonArray(); foreach (var prop in ModelState.Values) { if (prop.Errors.Any()) { errors.Add(prop.Errors.First().ErrorMessage); } } return new HttpResponseMessage<JsonValue>(errors, HttpStatusCode.BadRequest); } // Add movieToCreate to the database and update primary key movieToCreate.Id = 23; // Build a response that contains the location of the new movie var response = new HttpResponseMessage<Movie>(movieToCreate, HttpStatusCode.Created); var relativePath = "/api/movie/" + movieToCreate.Id; response.Headers.Location = new Uri(Request.RequestUri, relativePath); return response; } If ModelState.IsValid has the value false then the errors in model state are copied to a new JSON array. Each property – such as the Title and Director property — can have multiple errors. In the code above, only the first error message is copied over. The JSON array is returned with a Bad Request status code (400 status code). The following HTML page illustrates how you can invoke our modified PostMovie() action and display any error messages: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Create Movie</title> </head> <body> <script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script> <script type="text/javascript"> var movieToCreate = { title: "The Hobbit", director: "" }; createMovie(movieToCreate, function (newMovie) { alert("New movie created with an Id of " + newMovie.Id); }, function (errors) { var strErrors = ""; $.each(errors, function(index, err) { strErrors += "*" + err + "n"; }); alert(strErrors); } ); function createMovie(movieToCreate, success, fail) { $.ajax({ url: "/api/Movie", data: JSON.stringify(movieToCreate), type: "POST", contentType: "application/json;charset=utf-8", statusCode: { 201: function (newMovie) { success(newMovie); }, 400: function (xhr) { var errors = JSON.parse(xhr.responseText); fail(errors); } } }); } </script> </body> </html> The createMovie() function performs an Ajax request and handles either a 201 or a 400 status code from the response. If a 201 status code is returned then there were no validation errors and the new movie was created. If, on the other hand, a 400 status code is returned then there was a validation error. The validation errors are retrieved from the XmlHttpRequest responseText property. The error messages are displayed in an alert: (Please don’t use JavaScript alert dialogs to display validation errors, I just did it this way out of pure laziness) This validation code in our PostMovie() method is pretty generic. There is nothing specific about this code to the PostMovie() method. In the following video, Jon Galloway demonstrates how to create a global Validation filter which can be used with any API controller action: http://www.asp.net/web-api/overview/web-api-routing-and-actions/video-custom-validation His validation filter looks like this: using System.Json; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http.Controllers; using System.Web.Http.Filters; namespace MyWebAPIApp.Filters { public class ValidationActionFilter:ActionFilterAttribute { public override void OnActionExecuting(HttpActionContext actionContext) { var modelState = actionContext.ModelState; if (!modelState.IsValid) { dynamic errors = new JsonObject(); foreach (var key in modelState.Keys) { var state = modelState[key]; if (state.Errors.Any()) { errors[key] = state.Errors.First().ErrorMessage; } } actionContext.Response = new HttpResponseMessage<JsonValue>(errors, HttpStatusCode.BadRequest); } } } } And you can register the validation filter in the Application_Start() method in the Global.asax file like this: GlobalConfiguration.Configuration.Filters.Add(new ValidationActionFilter()); After you register the Validation filter, validation error messages are returned from any API controller action method automatically when validation fails. You don’t need to add any special logic to any of your API controller actions to take advantage of the filter. Querying using OData The OData protocol is an open protocol created by Microsoft which enables you to perform queries over the web. The official website for OData is located here: http://odata.org For example, here are some of the query options which you can use with OData: · $orderby – Enables you to retrieve results in a certain order. · $top – Enables you to retrieve a certain number of results. · $skip – Enables you to skip over a certain number of results (use with $top for paging). · $filter – Enables you to filter the results returned. The ASP.NET Web API supports a subset of the OData protocol. You can use all of the query options listed above when interacting with an API controller. The only requirement is that the API controller action returns its data as IQueryable. For example, the following Movie controller has an action named GetMovies() which returns an IQueryable of movies: public IQueryable<Movie> GetMovies() { return new List<Movie> { new Movie {Id=1, Title="Star Wars", Director="Lucas"}, new Movie {Id=2, Title="King Kong", Director="Jackson"}, new Movie {Id=3, Title="Willow", Director="Lucas"}, new Movie {Id=4, Title="Shrek", Director="Smith"}, new Movie {Id=5, Title="Memento", Director="Nolan"} }.AsQueryable(); } If you enter the following URL in your browser: /api/movie?$top=2&$orderby=Title Then you will limit the movies returned to the top 2 in order of the movie Title. You will get the following results: By using the $top option in combination with the $skip option, you can enable client-side paging. For example, you can use $top and $skip to page through thousands of products, 10 products at a time. The $filter query option is very powerful. You can use this option to filter the results from a query. Here are some examples: Return every movie directed by Lucas: /api/movie?$filter=Director eq ‘Lucas’ Return every movie which has a title which starts with ‘S’: /api/movie?$filter=startswith(Title,’S') Return every movie which has an Id greater than 2: /api/movie?$filter=Id gt 2 The complete documentation for the $filter option is located here: http://www.odata.org/developers/protocols/uri-conventions#FilterSystemQueryOption Summary The goal of this blog entry was to provide you with an overview of the new ASP.NET Web API introduced with the Beta release of ASP.NET 4. In this post, I discussed how you can retrieve, insert, update, and delete data by using jQuery with the Web API. I also discussed how you can use the standard validation attributes with the Web API. You learned how to return validation error messages to the client and display the error messages using jQuery. Finally, we briefly discussed how the ASP.NET Web API supports the OData protocol. For example, you learned how to filter records returned from an API controller action by using the $filter query option. I’m excited about the new Web API. This is a feature which I expect to use with almost every ASP.NET application which I build in the future.

    Read the article

  • AngularJS on top of ASP.NET: Moving the MVC framework out to the browser

    - by Varun Chatterji
    Heavily drawing inspiration from Ruby on Rails, MVC4’s convention over configuration model of development soon became the Holy Grail of .NET web development. The MVC model brought with it the goodness of proper separation of concerns between business logic, data, and the presentation logic. However, the MVC paradigm, was still one in which server side .NET code could be mixed with presentation code. The Razor templating engine, though cleaner than its predecessors, still encouraged and allowed you to mix .NET server side code with presentation logic. Thus, for example, if the developer required a certain <div> tag to be shown if a particular variable ShowDiv was true in the View’s model, the code could look like the following: Fig 1: To show a div or not. Server side .NET code is used in the View Mixing .NET code with HTML in views can soon get very messy. Wouldn’t it be nice if the presentation layer (HTML) could be pure HTML? Also, in the ASP.NET MVC model, some of the business logic invariably resides in the controller. It is tempting to use an anti­pattern like the one shown above to control whether a div should be shown or not. However, best practice would indicate that the Controller should not be aware of the div. The ShowDiv variable in the model should not exist. A controller should ideally, only be used to do the plumbing of getting the data populated in the model and nothing else. The view (ideally pure HTML) should render the presentation layer based on the model. In this article we will see how Angular JS, a new JavaScript framework by Google can be used effectively to build web applications where: 1. Views are pure HTML 2. Controllers (in the server sense) are pure REST based API calls 3. The presentation layer is loaded as needed from partial HTML only files. What is MVVM? MVVM short for Model View View Model is a new paradigm in web development. In this paradigm, the Model and View stuff exists on the client side through javascript instead of being processed on the server through postbacks. These frameworks are JavaScript frameworks that facilitate the clear separation of the “frontend” or the data rendering logic from the “backend” which is typically just a REST based API that loads and processes data through a resource model. The frameworks are called MVVM as a change to the Model (through javascript) gets reflected in the view immediately i.e. Model > View. Also, a change on the view (through manual input) gets reflected in the model immediately i.e. View > Model. The following figure shows this conceptually (comments are shown in red): Fig 2: Demonstration of MVVM in action In Fig 2, two text boxes are bound to the same variable model.myInt. Thus, changing the view manually (changing one text box through keyboard input) also changes the other textbox in real time demonstrating V > M property of a MVVM framework. Furthermore, clicking the button adds 1 to the value of model.myInt thus changing the model through JavaScript. This immediately updates the view (the value in the two textboxes) thus demonstrating the M > V property of a MVVM framework. Thus we see that the model in a MVVM JavaScript framework can be regarded as “the single source of truth“. This is an important concept. Angular is one such MVVM framework. We shall use it to build a simple app that sends SMS messages to a particular number. Application, Routes, Views, Controllers, Scope and Models Angular can be used in many ways to construct web applications. For this article, we shall only focus on building Single Page Applications (SPAs). Many of the approaches we will follow in this article have alternatives. It is beyond the scope of this article to explain every nuance in detail but we shall try to touch upon the basic concepts and end up with a working application that can be used to send SMS messages using Sent.ly Plus (a service that is itself built using Angular). Before you read on, we would like to urge you to forget what you know about Models, Views, Controllers and Routes in the ASP.NET MVC4 framework. All these words have different meanings in the Angular world. Whenever these words are used in this article, they will refer to Angular concepts and not ASP.NET MVC4 concepts. The following figure shows the skeleton of the root page of an SPA: Fig 3: The skeleton of a SPA The skeleton of the application is based on the Bootstrap starter template which can be found at: http://getbootstrap.com/examples/starter­template/ Apart from loading the Angular, jQuery and Bootstrap JavaScript libraries, it also loads our custom scripts /app/js/controllers.js /app/js/app.js These scripts define the routes, views and controllers which we shall come to in a moment. Application Notice that the body tag (Fig. 3) has an extra attribute: ng­app=”smsApp” Providing this tag “bootstraps” our single page application. It tells Angular to load a “module” called smsApp. This “module” is defined /app/js/app.js angular.module('smsApp', ['smsApp.controllers', function () {}]) Fig 4: The definition of our application module The line shows above, declares a module called smsApp. It also declares that this module “depends” on another module called “smsApp.controllers”. The smsApp.controllers module will contain all the controllers for our SPA. Routing and Views Notice that in the Navbar (in Fig 3) we have included two hyperlinks to: “#/app” “#/help” This is how Angular handles routing. Since the URLs start with “#”, they are actually just bookmarks (and not server side resources). However, our route definition (in /app/js/app.js) gives these URLs a special meaning within the Angular framework. angular.module('smsApp', ['smsApp.controllers', function () { }]) //Configure the routes .config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/binding', { templateUrl: '/app/partials/bindingexample.html', controller: 'BindingController' }); }]); Fig 5: The definition of a route with an associated partial view and controller As we can see from the previous code sample, we are using the $routeProvider object in the configuration of our smsApp module. Notice how the code “asks for” the $routeProvider object by specifying it as a dependency in the [] braces and then defining a function that accepts it as a parameter. This is known as dependency injection. Please refer to the following link if you want to delve into this topic: http://docs.angularjs.org/guide/di What the above code snippet is doing is that it is telling Angular that when the URL is “#/binding”, then it should load the HTML snippet (“partial view”) found at /app/partials/bindingexample.html. Also, for this URL, Angular should load the controller called “BindingController”. We have also marked the div with the class “container” (in Fig 3) with the ng­view attribute. This attribute tells Angular that views (partial HTML pages) defined in the routes will be loaded within this div. You can see that the Angular JavaScript framework, unlike many other frameworks, works purely by extending HTML tags and attributes. It also allows you to extend HTML with your own tags and attributes (through directives) if you so desire, you can find out more about directives at the following URL: http://www.codeproject.com/Articles/607873/Extending­HTML­with­AngularJS­Directives Controllers and Models We have seen how we define what views and controllers should be loaded for a particular route. Let us now consider how controllers are defined. Our controllers are defined in the file /app/js/controllers.js. The following snippet shows the definition of the “BindingController” which is loaded when we hit the URL http://localhost:port/index.html#/binding (as we have defined in the route earlier as shown in Fig 5). Remember that we had defined that our application module “smsApp” depends on the “smsApp.controllers” module (see Fig 4). The code snippet below shows how the “BindingController” defined in the route shown in Fig 5 is defined in the module smsApp.controllers: angular.module('smsApp.controllers', [function () { }]) .controller('BindingController', ['$scope', function ($scope) { $scope.model = {}; $scope.model.myInt = 6; $scope.addOne = function () { $scope.model.myInt++; } }]); Fig 6: The definition of a controller in the “smsApp.controllers” module. The pieces are falling in place! Remember Fig.2? That was the code of a partial view that was loaded within the container div of the skeleton SPA shown in Fig 3. The route definition shown in Fig 5 also defined that the controller called “BindingController” (shown in Fig 6.) was loaded when we loaded the URL: http://localhost:22544/index.html#/binding The button in Fig 2 was marked with the attribute ng­click=”addOne()” which added 1 to the value of model.myInt. In Fig 6, we can see that this function is actually defined in the “BindingController”. Scope We can see from Fig 6, that in the definition of “BindingController”, we defined a dependency on $scope and then, as usual, defined a function which “asks for” $scope as per the dependency injection pattern. So what is $scope? Any guesses? As you might have guessed a scope is a particular “address space” where variables and functions may be defined. This has a similar meaning to scope in a programming language like C#. Model: The Scope is not the Model It is tempting to assign variables in the scope directly. For example, we could have defined myInt as $scope.myInt = 6 in Fig 6 instead of $scope.model.myInt = 6. The reason why this is a bad idea is that scope in hierarchical in Angular. Thus if we were to define a controller which was defined within the another controller (nested controllers), then the inner controller would inherit the scope of the parent controller. This inheritance would follow JavaScript prototypal inheritance. Let’s say the parent controller defined a variable through $scope.myInt = 6. The child controller would inherit the scope through java prototypical inheritance. This basically means that the child scope has a variable myInt that points to the parent scopes myInt variable. Now if we assigned the value of myInt in the parent, the child scope would be updated with the same value as the child scope’s myInt variable points to the parent scope’s myInt variable. However, if we were to assign the value of the myInt variable in the child scope, then the link of that variable to the parent scope would be broken as the variable myInt in the child scope now points to the value 6 and not to the parent scope’s myInt variable. But, if we defined a variable model in the parent scope, then the child scope will also have a variable model that points to the model variable in the parent scope. Updating the value of $scope.model.myInt in the parent scope would change the model variable in the child scope too as the variable is pointed to the model variable in the parent scope. Now changing the value of $scope.model.myInt in the child scope would ALSO change the value in the parent scope. This is because the model reference in the child scope is pointed to the scope variable in the parent. We did no new assignment to the model variable in the child scope. We only changed an attribute of the model variable. Since the model variable (in the child scope) points to the model variable in the parent scope, we have successfully changed the value of myInt in the parent scope. Thus the value of $scope.model.myInt in the parent scope becomes the “single source of truth“. This is a tricky concept, thus it is considered good practice to NOT use scope inheritance. More info on prototypal inheritance in Angular can be found in the “JavaScript Prototypal Inheritance” section at the following URL: https://github.com/angular/angular.js/wiki/Understanding­Scopes. Building It: An Angular JS application using a .NET Web API Backend Now that we have a perspective on the basic components of an MVVM application built using Angular, let’s build something useful. We will build an application that can be used to send out SMS messages to a given phone number. The following diagram describes the architecture of the application we are going to build: Fig 7: Broad application architecture We are going to add an HTML Partial to our project. This partial will contain the form fields that will accept the phone number and message that needs to be sent as an SMS. It will also display all the messages that have previously been sent. All the executable code that is run on the occurrence of events (button clicks etc.) in the view resides in the controller. The controller interacts with the ASP.NET WebAPI to get a history of SMS messages, add a message etc. through a REST based API. For the purposes of simplicity, we will use an in memory data structure for the purposes of creating this application. Thus, the tasks ahead of us are: Creating the REST WebApi with GET, PUT, POST, DELETE methods. Creating the SmsView.html partial Creating the SmsController controller with methods that are called from the SmsView.html partial Add a new route that loads the controller and the partial. 1. Creating the REST WebAPI This is a simple task that should be quite straightforward to any .NET developer. The following listing shows our ApiController: public class SmsMessage { public string to { get; set; } public string message { get; set; } } public class SmsResource : SmsMessage { public int smsId { get; set; } } public class SmsResourceController : ApiController { public static Dictionary<int, SmsResource> messages = new Dictionary<int, SmsResource>(); public static int currentId = 0; // GET api/<controller> public List<SmsResource> Get() { List<SmsResource> result = new List<SmsResource>(); foreach (int key in messages.Keys) { result.Add(messages[key]); } return result; } // GET api/<controller>/5 public SmsResource Get(int id) { if (messages.ContainsKey(id)) return messages[id]; return null; } // POST api/<controller> public List<SmsResource> Post([FromBody] SmsMessage value) { //Synchronize on messages so we don't have id collisions lock (messages) { SmsResource res = (SmsResource) value; res.smsId = currentId++; messages.Add(res.smsId, res); //SentlyPlusSmsSender.SendMessage(value.to, value.message); return Get(); } } // PUT api/<controller>/5 public List<SmsResource> Put(int id, [FromBody] SmsMessage value) { //Synchronize on messages so we don't have id collisions lock (messages) { if (messages.ContainsKey(id)) { //Update the message messages[id].message = value.message; messages[id].to = value.message; } return Get(); } } // DELETE api/<controller>/5 public List<SmsResource> Delete(int id) { if (messages.ContainsKey(id)) { messages.Remove(id); } return Get(); } } Once this class is defined, we should be able to access the WebAPI by a simple GET request using the browser: http://localhost:port/api/SmsResource Notice the commented line: //SentlyPlusSmsSender.SendMessage The SentlyPlusSmsSender class is defined in the attached solution. We have shown this line as commented as we want to explain the core Angular concepts. If you load the attached solution, this line is uncommented in the source and an actual SMS will be sent! By default, the API returns XML. For consumption of the API in Angular, we would like it to return JSON. To change the default to JSON, we make the following change to WebApiConfig.cs file located in the App_Start folder. public static class WebApiConfig { public static void Register(HttpConfiguration config) { config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); var appXmlType = config.Formatters.XmlFormatter. SupportedMediaTypes. FirstOrDefault( t => t.MediaType == "application/xml"); config.Formatters.XmlFormatter.SupportedMediaTypes.Remove(appXmlType); } } We now have our backend REST Api which we can consume from Angular! 2. Creating the SmsView.html partial This simple partial will define two fields: the destination phone number (international format starting with a +) and the message. These fields will be bound to model.phoneNumber and model.message. We will also add a button that we shall hook up to sendMessage() in the controller. A list of all previously sent messages (bound to model.allMessages) will also be displayed below the form input. The following code shows the code for the partial: <!--­­ If model.errorMessage is defined, then render the error div -­­> <div class="alert alert-­danger alert-­dismissable" style="margin­-top: 30px;" ng­-show="model.errorMessage != undefined"> <button type="button" class="close" data­dismiss="alert" aria­hidden="true">&times;</button> <strong>Error!</strong> <br /> {{ model.errorMessage }} </div> <!--­­ The input fields bound to the model --­­> <div class="well" style="margin-­top: 30px;"> <table style="width: 100%;"> <tr> <td style="width: 45%; text-­align: center;"> <input type="text" placeholder="Phone number (eg; +44 7778 609466)" ng­-model="model.phoneNumber" class="form-­control" style="width: 90%" onkeypress="return checkPhoneInput();" /> </td> <td style="width: 45%; text-­align: center;"> <input type="text" placeholder="Message" ng­-model="model.message" class="form-­control" style="width: 90%" /> </td> <td style="text-­align: center;"> <button class="btn btn-­danger" ng-­click="sendMessage();" ng-­disabled="model.isAjaxInProgress" style="margin­right: 5px;">Send</button> <img src="/Content/ajax-­loader.gif" ng­-show="model.isAjaxInProgress" /> </td> </tr> </table> </div> <!--­­ The past messages ­­--> <div style="margin-­top: 30px;"> <!­­-- The following div is shown if there are no past messages --­­> <div ng­-show="model.allMessages.length == 0"> No messages have been sent yet! </div> <!--­­ The following div is shown if there are some past messages --­­> <div ng-­show="model.allMessages.length == 0"> <table style="width: 100%;" class="table table-­striped"> <tr> <td>Phone Number</td> <td>Message</td> <td></td> </tr> <!--­­ The ng-­repeat directive is line the repeater control in .NET, but as you can see this partial is pure HTML which is much cleaner --> <tr ng-­repeat="message in model.allMessages"> <td>{{ message.to }}</td> <td>{{ message.message }}</td> <td> <button class="btn btn-­danger" ng-­click="delete(message.smsId);" ng­-disabled="model.isAjaxInProgress">Delete</button> </td> </tr> </table> </div> </div> The above code is commented and should be self explanatory. Conditional rendering is achieved through using the ng-­show=”condition” attribute on various div tags. Input fields are bound to the model and the send button is bound to the sendMessage() function in the controller as through the ng­click=”sendMessage()” attribute defined on the button tag. While AJAX calls are taking place, the controller sets model.isAjaxInProgress to true. Based on this variable, buttons are disabled through the ng-­disabled directive which is added as an attribute to the buttons. The ng-­repeat directive added as an attribute to the tr tag causes the table row to be rendered multiple times much like an ASP.NET repeater. 3. Creating the SmsController controller The penultimate piece of our application is the controller which responds to events from our view and interacts with our MVC4 REST WebAPI. The following listing shows the code we need to add to /app/js/controllers.js. Note that controller definitions can be chained. Also note that this controller “asks for” the $http service. The $http service is a simple way in Angular to do AJAX. So far we have only encountered modules, controllers, views and directives in Angular. The $http is new entity in Angular called a service. More information on Angular services can be found at the following URL: http://docs.angularjs.org/guide/dev_guide.services.understanding_services. .controller('SmsController', ['$scope', '$http', function ($scope, $http) { //We define the model $scope.model = {}; //We define the allMessages array in the model //that will contain all the messages sent so far $scope.model.allMessages = []; //The error if any $scope.model.errorMessage = undefined; //We initially load data so set the isAjaxInProgress = true; $scope.model.isAjaxInProgress = true; //Load all the messages $http({ url: '/api/smsresource', method: "GET" }). success(function (data, status, headers, config) { this callback will be called asynchronously //when the response is available $scope.model.allMessages = data; //We are done with AJAX loading $scope.model.isAjaxInProgress = false; }). error(function (data, status, headers, config) { //called asynchronously if an error occurs //or server returns response with an error status. $scope.model.errorMessage = "Error occurred status:" + status; //We are done with AJAX loading $scope.model.isAjaxInProgress = false; }); $scope.delete = function (id) { //We are making an ajax call so we set this to true $scope.model.isAjaxInProgress = true; $http({ url: '/api/smsresource/' + id, method: "DELETE" }). success(function (data, status, headers, config) { // this callback will be called asynchronously // when the response is available $scope.model.allMessages = data; //We are done with AJAX loading $scope.model.isAjaxInProgress = false; }); error(function (data, status, headers, config) { // called asynchronously if an error occurs // or server returns response with an error status. $scope.model.errorMessage = "Error occurred status:" + status; //We are done with AJAX loading $scope.model.isAjaxInProgress = false; }); } $scope.sendMessage = function () { $scope.model.errorMessage = undefined; var message = ''; if($scope.model.message != undefined) message = $scope.model.message.trim(); if ($scope.model.phoneNumber == undefined || $scope.model.phoneNumber == '' || $scope.model.phoneNumber.length < 10 || $scope.model.phoneNumber[0] != '+') { $scope.model.errorMessage = "You must enter a valid phone number in international format. Eg: +44 7778 609466"; return; } if (message.length == 0) { $scope.model.errorMessage = "You must specify a message!"; return; } //We are making an ajax call so we set this to true $scope.model.isAjaxInProgress = true; $http({ url: '/api/smsresource', method: "POST", data: { to: $scope.model.phoneNumber, message: $scope.model.message } }). success(function (data, status, headers, config) { // this callback will be called asynchronously // when the response is available $scope.model.allMessages = data; //We are done with AJAX loading $scope.model.isAjaxInProgress = false; }). error(function (data, status, headers, config) { // called asynchronously if an error occurs // or server returns response with an error status. $scope.model.errorMessage = "Error occurred status:" + status // We are done with AJAX loading $scope.model.isAjaxInProgress = false; }); } }]); We can see from the previous listing how the functions that are called from the view are defined in the controller. It should also be evident how easy it is to make AJAX calls to consume our MVC4 REST WebAPI. Now we are left with the final piece. We need to define a route that associates a particular path with the view we have defined and the controller we have defined. 4. Add a new route that loads the controller and the partial This is the easiest part of the puzzle. We simply define another route in the /app/js/app.js file: $routeProvider.when('/sms', { templateUrl: '/app/partials/smsview.html', controller: 'SmsController' }); Conclusion In this article we have seen how much of the server side functionality in the MVC4 framework can be moved to the browser thus delivering a snappy and fast user interface. We have seen how we can build client side HTML only views that avoid the messy syntax offered by server side Razor views. We have built a functioning app from the ground up. The significant advantage of this approach to building web apps is that the front end can be completely platform independent. Even though we used ASP.NET to create our REST API, we could just easily have used any other language such as Node.js, Ruby etc without changing a single line of our front end code. Angular is a rich framework and we have only touched on basic functionality required to create a SPA. For readers who wish to delve further into the Angular framework, we would recommend the following URL as a starting point: http://docs.angularjs.org/misc/started. To get started with the code for this project: Sign up for an account at http://plus.sent.ly (free) Add your phone number Go to the “My Identies Page” Note Down your Sender ID, Consumer Key and Consumer Secret Download the code for this article at: https://docs.google.com/file/d/0BzjEWqSE31yoZjZlV0d0R2Y3eW8/edit?usp=sharing Change the values of Sender Id, Consumer Key and Consumer Secret in the web.config file Run the project through Visual Studio!

    Read the article

  • Table sorting & pagination with jQuery and Razor in ASP.NET MVC

    - by hajan
    Introduction jQuery enjoys living inside pages which are built on top of ASP.NET MVC Framework. The ASP.NET MVC is a place where things are organized very well and it is quite hard to make them dirty, especially because the pattern enforces you on purity (you can still make it dirty if you want so ;) ). We all know how easy is to build a HTML table with a header row, footer row and table rows showing some data. With ASP.NET MVC we can do this pretty easy, but, the result will be pure HTML table which only shows data, but does not includes sorting, pagination or some other advanced features that we were used to have in the ASP.NET WebForms GridView. Ok, there is the WebGrid MVC Helper, but what if we want to make something from pure table in our own clean style? In one of my recent projects, I’ve been using the jQuery tablesorter and tablesorter.pager plugins that go along. You don’t need to know jQuery to make this work… You need to know little CSS to create nice design for your table, but of course you can use mine from the demo… So, what you will see in this blog is how to attach this plugin to your pure html table and a div for pagination and make your table with advanced sorting and pagination features.   Demo Project Resources The resources I’m using for this demo project are shown in the following solution explorer window print screen: Content/images – folder that contains all the up/down arrow images, pagination buttons etc. You can freely replace them with your own, but keep the names the same if you don’t want to change anything in the CSS we will built later. Content/Site.css – The main css theme, where we will add the theme for our table too Controllers/HomeController.cs – The controller I’m using for this project Models/Person.cs – For this demo, I’m using Person.cs class Scripts – jquery-1.4.4.min.js, jquery.tablesorter.js, jquery.tablesorter.pager.js – required script to make the magic happens Views/Home/Index.cshtml – Index view (razor view engine) the other items are not important for the demo. ASP.NET MVC 1. Model In this demo I use only one Person class which defines Person entity with several properties. You can use your own model, maybe one which will access data from database or any other resource. Person.cs public class Person {     public string Name { get; set; }     public string Surname { get; set; }     public string Email { get; set; }     public int? Phone { get; set; }     public DateTime? DateAdded { get; set; }     public int? Age { get; set; }     public Person(string name, string surname, string email,         int? phone, DateTime? dateadded, int? age)     {         Name = name;         Surname = surname;         Email = email;         Phone = phone;         DateAdded = dateadded;         Age = age;     } } 2. View In our example, we have only one Index.chtml page where Razor View engine is used. Razor view engine is my favorite for ASP.NET MVC because it’s very intuitive, fluid and keeps your code clean. 3. Controller Since this is simple example with one page, we use one HomeController.cs where we have two methods, one of ActionResult type (Index) and another GetPeople() used to create and return list of people. HomeController.cs public class HomeController : Controller {     //     // GET: /Home/     public ActionResult Index()     {         ViewBag.People = GetPeople();         return View();     }     public List<Person> GetPeople()     {         List<Person> listPeople = new List<Person>();                  listPeople.Add(new Person("Hajan", "Selmani", "[email protected]", 070070070,DateTime.Now, 25));                     listPeople.Add(new Person("Straight", "Dean", "[email protected]", 123456789, DateTime.Now.AddDays(-5), 35));         listPeople.Add(new Person("Karsen", "Livia", "[email protected]", 46874651, DateTime.Now.AddDays(-2), 31));         listPeople.Add(new Person("Ringer", "Anne", "[email protected]", null, DateTime.Now, null));         listPeople.Add(new Person("O'Leary", "Michael", "[email protected]", 32424344, DateTime.Now, 44));         listPeople.Add(new Person("Gringlesby", "Anne", "[email protected]", null, DateTime.Now.AddDays(-9), 18));         listPeople.Add(new Person("Locksley", "Stearns", "[email protected]", 2135345, DateTime.Now, null));         listPeople.Add(new Person("DeFrance", "Michel", "[email protected]", 235325352, DateTime.Now.AddDays(-18), null));         listPeople.Add(new Person("White", "Johnson", null, null, DateTime.Now.AddDays(-22), 55));         listPeople.Add(new Person("Panteley", "Sylvia", null, 23233223, DateTime.Now.AddDays(-1), 32));         listPeople.Add(new Person("Blotchet-Halls", "Reginald", null, 323243423, DateTime.Now, 26));         listPeople.Add(new Person("Merr", "South", "[email protected]", 3232442, DateTime.Now.AddDays(-5), 85));         listPeople.Add(new Person("MacFeather", "Stearns", "[email protected]", null, DateTime.Now, null));         return listPeople;     } }   TABLE CSS/HTML DESIGN Now, lets start with the implementation. First of all, lets create the table structure and the main CSS. 1. HTML Structure @{     Layout = null;     } <!DOCTYPE html> <html> <head>     <title>ASP.NET & jQuery</title>     <!-- referencing styles, scripts and writing custom js scripts will go here --> </head> <body>     <div>         <table class="tablesorter">             <thead>                 <tr>                     <th> value </th>                 </tr>             </thead>             <tbody>                 <tr>                     <td>value</td>                 </tr>             </tbody>             <tfoot>                 <tr>                     <th> value </th>                 </tr>             </tfoot>         </table>         <div id="pager">                      </div>     </div> </body> </html> So, this is the main structure you need to create for each of your tables where you want to apply the functionality we will create. Of course the scripts are referenced once ;). As you see, our table has class tablesorter and also we have a div with id pager. In the next steps we will use both these to create the needed functionalities. The complete Index.cshtml coded to get the data from controller and display in the page is: <body>     <div>         <table class="tablesorter">             <thead>                 <tr>                     <th>Name</th>                     <th>Surname</th>                     <th>Email</th>                     <th>Phone</th>                     <th>Date Added</th>                 </tr>             </thead>             <tbody>                 @{                     foreach (var p in ViewBag.People)                     {                                 <tr>                         <td>@p.Name</td>                         <td>@p.Surname</td>                         <td>@p.Email</td>                         <td>@p.Phone</td>                         <td>@p.DateAdded</td>                     </tr>                     }                 }             </tbody>             <tfoot>                 <tr>                     <th>Name</th>                     <th>Surname</th>                     <th>Email</th>                     <th>Phone</th>                     <th>Date Added</th>                 </tr>             </tfoot>         </table>         <div id="pager" style="position: none;">             <form>             <img src="@Url.Content("~/Content/images/first.png")" class="first" />             <img src="@Url.Content("~/Content/images/prev.png")" class="prev" />             <input type="text" class="pagedisplay" />             <img src="@Url.Content("~/Content/images/next.png")" class="next" />             <img src="@Url.Content("~/Content/images/last.png")" class="last" />             <select class="pagesize">                 <option selected="selected" value="5">5</option>                 <option value="10">10</option>                 <option value="20">20</option>                 <option value="30">30</option>                 <option value="40">40</option>             </select>             </form>         </div>     </div> </body> So, mainly the structure is the same. I have added @Razor code to create table with data retrieved from the ViewBag.People which has been filled with data in the home controller. 2. CSS Design The CSS code I’ve created is: /* DEMO TABLE */ body {     font-size: 75%;     font-family: Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif;     color: #232323;     background-color: #fff; } table { border-spacing:0; border:1px solid gray;} table.tablesorter thead tr .header {     background-image: url(images/bg.png);     background-repeat: no-repeat;     background-position: center right;     cursor: pointer; } table.tablesorter tbody td {     color: #3D3D3D;     padding: 4px;     background-color: #FFF;     vertical-align: top; } table.tablesorter tbody tr.odd td {     background-color:#F0F0F6; } table.tablesorter thead tr .headerSortUp {     background-image: url(images/asc.png); } table.tablesorter thead tr .headerSortDown {     background-image: url(images/desc.png); } table th { width:150px;            border:1px outset gray;            background-color:#3C78B5;            color:White;            cursor:pointer; } table thead th:hover { background-color:Yellow; color:Black;} table td { width:150px; border:1px solid gray;} PAGINATION AND SORTING Now, when everything is ready and we have the data, lets make pagination and sorting functionalities 1. jQuery Scripts referencing <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.tablesorter.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script> 2. jQuery Sorting and Pagination script   <script type="text/javascript">     $(function () {         $("table.tablesorter").tablesorter({ widthFixed: true, sortList: [[0, 0]] })         .tablesorterPager({ container: $("#pager"), size: $(".pagesize option:selected").val() });     }); </script> So, with only two lines of code, I’m using both tablesorter and tablesorterPager plugins, giving some options to both these. Options added: tablesorter - widthFixed: true – gives fixed width of the columns tablesorter - sortList[[0,0]] – An array of instructions for per-column sorting and direction in the format: [[columnIndex, sortDirection], ... ] where columnIndex is a zero-based index for your columns left-to-right and sortDirection is 0 for Ascending and 1 for Descending. A valid argument that sorts ascending first by column 1 and then column 2 looks like: [[0,0],[1,0]] (source: http://tablesorter.com/docs/) tablesorterPager – container: $(“#pager”) – tells the pager container, the div with id pager in our case. tablesorterPager – size: the default size of each page, where I get the default value selected, so if you put selected to any other of the options in your select list, you will have this number of rows as default per page for the table too. END RESULTS 1. Table once the page is loaded (default results per page is 5 and is automatically sorted by 1st column as sortList is specified) 2. Sorted by Phone Descending 3. Changed pagination to 10 items per page 4. Sorted by Phone and Name (use SHIFT to sort on multiple columns) 5. Sorted by Date Added 6. Page 3, 5 items per page   ADDITIONAL ENHANCEMENTS We can do additional enhancements to the table. We can make search for each column. I will cover this in one of my next blogs. Stay tuned. DEMO PROJECT You can download demo project source code from HERE.CONCLUSION Once you finish with the demo, run your page and open the source code. You will be amazed of the purity of your code.Working with pagination in client side can be very useful. One of the benefits is performance, but if you have thousands of rows in your tables, you will get opposite result when talking about performance. Hence, sometimes it is nice idea to make pagination on back-end. So, the compromise between both approaches would be best to combine both of them. I use at most up to 500 rows on client-side and once the user reach the last page, we can trigger ajax postback which can get the next 500 rows using server-side pagination of the same data. I would like to recommend the following blog post http://weblogs.asp.net/gunnarpeipman/archive/2010/09/14/returning-paged-results-from-repositories-using-pagedresult-lt-t-gt.aspx, which will help you understand how to return page results from repository. I hope this was helpful post for you. Wait for my next posts ;). Please do let me know your feedback. Best Regards, Hajan

    Read the article

  • CodePlex Daily Summary for Sunday, August 10, 2014

    CodePlex Daily Summary for Sunday, August 10, 2014Popular ReleasesWinForms MVP: WinForms MVP v1.0.1008.2014: Issues Fixed Issue 1 New Added MessageBus and AppState features. Added tests in support of the MessageBus and AppState features Added dependency injection support for Ninject. Added tests in support of the NinjectPresenterFactory.WP8 Native Access Webserver: Version alpha 0.5.3: Figured I should post a newer version. This build includes pretty broad registry browsing (especially if you can use the AllCapabilities version) and (in the AC version) also fairly broad file system access. It also includes the ability to download .REG files. There have been tons of bugfixes and performance improvements as well, plus a slightly better UI in both the app and the web interface. For more info, please read the forum post here: http://forum.xda-developers.com/showthread.php?t=23...ClosedXML - The easy way to OpenXML: ClosedXML 0.74.0: Many updates. See history.SEToolbox: SEToolbox 01.042.019 Release 1: Added RadioAntenna broadcast name to ship name detail. Added two additional columns for Asteroid material generation for Asteroid Fields. Added Mass and Block number columns to main display. Added Ellipsis to some columns on main display to reduce name confusion. Added correct SE version number in file when saving. Re-added in reattaching Motor when drag/dropping or importing ships (KeenSH have added RotorEntityId back in after removing it months ago). Added option to export and r...Instant Beautiful Browsing: IBB 14.3 Alpha: An alpha release of IBB. After 3 years of the last release this version is made from scratch, with tons of new features like: Make your own IBB aps. HTML 5. Better UI. Extreme Windows 8 resemblance. Photos. Store. Movement TONS of times smother compared to previous versions. Remember that this is AN ALPHA release, I hope I will have "IBB 14" finished by December. The documentation on how to create a new application for IBB will come next monthjQuery List DragSort: jQuery List DragSort 0.5.2: Fixed scrollContainer removing deprecated use of $.browser so should now work with latest version of jQuery. Added the ability to return false in dragEnd to revert sort order Project changes Added nuget package for dragsort https://www.nuget.org/packages/dragsort Converted repository from SVN to MercurialCRM 2013 One Click Navigation: CRM2013OneClickNavigation_1_0_0_4_managed.zip: Fixed some minor issues and added support for the following languages Spanish German French Italian Portuguese Russian Arabic Chinese Japanese Hindi Hebrew Korean Polish ThaiBraintree Client Library: Braintree 2.32.0: Allow credit card verification options to be passed outside of the nonce for PaymentMethod.create Allow billingaddress parameters and billingaddress_id to be passed outside of the nonce for PaymentMethod.create Add Subscriptions to paypal accounts Add PaymentMethod.update Add failonduplicatepaymentmethod option to PaymentMethod.create Add support for dispute webhooksThe Mario Kart 8 App: V1.0.2.1: First Codeplex release. WINDOWS INSTALLER ONLYAspose Java for Docx4j: Aspose.Words vs Docx4j - v 1.0: Release contain the Code Comparison for Features in Docx4j SDK and Aspose.Words What's New ?Following Examples: Accessing Document Properties Add Bookmarks Convert to Formats Delete Bookmarks Working with Comments Feedback and Suggestions Many more examples are available at Aspose Docs. Raise your queries and suggest more examples via Aspose Forums or via this social coding site.File System Security PowerShell Module: NTFSSecurity 2.4.1: Add-Access and Remove-Access now take multiple accoutsYourSqlDba: YourSqlDba 5.2.1.: This version improves alert message that comes a while after you install the script. First it says to get it from YourSqlDba.CodePlex.com If you don't want to update now, just-rerun the script from your installed version. To get actual version running just execute install.PrintVersionInfo. . You can go to source code / history and click on change set 72957 to see changes in the script.Manipulator: Manipulator: manipulatorXNB filetype plugin for Paint.NET: Paint.NET XNB plugin v0.4.0.0: CHANGELOG Reverted old incomplete changes. Updated library for compatibility with Paint .NET 4. Updated project to NET 4.5. Updated version to 0.4.0.0. INSTALLATION INSTRUCTIONS Extract the ZIP file to your Paint.NET\FileTypes folder.EdiFabric: Release 4.1: Changed MessageContextWix# (WixSharp) - managed interface for WiX: Release 1.0.0.0: Release 1.0.0.0 Custom UI Custom MSI Dialog Custom CLR Dialog External UIMath.NET Numerics: Math.NET Numerics v3.2.0: Linear Algebra: Vector.Map2 (map2 in F#), storage-optimized Linear Algebra: fix RemoveColumn/Row early index bound check (was not strict enough) Statistics: Entropy ~Jeff Mastry Interpolation: use Array.BinarySearch instead of local implementation ~Candy Chiu Resources: fix a corrupted exception message string Portable Build: support .Net 4.0 as well by using profile 328 instead of 344. .Net 3.5: F# extensions now support .Net 3.5 as well .Net 3.5: NuGet package now contains pro...Virto Commerce Enterprise Open Source eCommerce Platform (asp.net mvc): Virto Commerce 1.11: Virto Commerce Community Edition version 1.11. To install the SDK package, please refer to SDK getting started documentation To configure source code package, please refer to Source code getting started documentation This release includes many bug fixes and minor improvements. More details about this release can be found on our blog at http://blog.virtocommerce.com.BoxStarter: Boxstarter 2.4.80: Running the Setup.bat file will install Chocolatey if not present and then install the Boxstarter modules.ProjkyAddin ssms addin script shortcut ssmsaddin: projkyaddin source code and msi files.: projkyaddin source code and msi files.New ProjectsBolos: BolosBWQS - The BitWise Query Service: Generic object queries with a bitwise syntax.DocX Razor: A DocX scaffolding engine with Razor syntaxJQuery Simple Logger: Its a very simple jQuery extension for logging client side events. There are four levels of logging: Error, Warning, Info, Debug ???????: ???????QQ:2281595668,?????,????,????  ?????????????????????,??1998?7??????,??????????,?????????,?????????????,????????????????????????. ????????????????????,????????: ?????QQ:2281595668,?????,????,????。???????????????????,??????????????,????,?????????????????????,??????。???????,??????????????????????。????????,????????????,?????????: ???????????: ?????QQ:2281595668,?????,????,????。????????????????????????,????????????,??????98???????????,????,??????????,?????????.   ?????????,????????????????,????????????????: ?????QQ:2281595668,?????,????,????。??????????????,?????????????????????,???????????????????????!?????????????????????????????????????????????、?????????、??????、???????: ???????????: ?????QQ:2281595668,?????,????,????。???????????????????,??1998?7??????,??????????,?????????,?????????????,??????????????????????. ????????????????????,????????????????: ????????????: ???????????: ?????QQ:2281595668,?????,????,????。???????????????????,??????????????,????,?????????????????????,??????。??,??????????????????????。????????,????????????,??????,???????: ??????QQ:2281595668,?????,????,????。??????????????????,????????。????????????????、???????。??????????????。?????????????????,??????,??????,??????,??????????????,????????: ??????QQ:2281595668,?????,????,????  ????????????????????,????????。????????????????、???????。??????????????。???????????????????,??????,??????,??????,??????????????????: ???????????: ??????????: ?????QQ:2281595668,?????,????,????。???????????????????,??1998?7??????,??????????,?????????,?????????????,??????????????????????. ????????????????????,????????????????: ??????QQ:2281595668,?????,????,????   ????????????????????,??1998?7??????,??????????,??????? ????????,?????????????, ???????????????????????. ???????????????????????: ?????QQ:2281595668,?????,????,????。??????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????,??????: ????????????: ??????QQ:2281595668,?????,????,????  ?????2004?,??????????????,??????????????????。?????? ?????,????????????????,????????????。????,????????????,????,??“??????”????????: ??????QQ:2281595668,?????,????,????。??????????????????????????,????????????!??????????????????????????????????????????、???????、????、??????、??????????。???????????????: ?????QQ:2281595668,?????,????,????。??????????????,?????????????????????,???????????????????????!?????????????????????????????????????????????、?????????、??????、???????: ???????????: ?????QQ:2281595668,?????,????,????。?????????????????,????????。????????????????、???????。??????????????。????????????????,??????,??????,??????,??????????????,????,?????: ?????QQ:2281595668,?????,????,????。  ??????98???????????,???????????????????,????????????,????,??????????,?????????,?????????,????????????????,???????????,??????????: ??????????QQ:2281595668,?????,????,????  ?????2004?,??????????????,??????????????????。?????? ?????,????????????????,????????????。????,???????????,????,??“???????????: ?????QQ:2281595668,?????,????,????。??????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????,?????: ?????QQ:2281595668,?????,????,????。??????????????,?????????????????????????,????????????!?????????????????????????????????????????、???????、????、??????、???????????????: ????????????: ???????????: ?????QQ:2281595668,?????,????,????。???????????????????,??1998?7??????,??????????,?????????,?????????????,??????????????????????. ????????????????????,???????????????: ?????QQ:2281595668,?????,????,????。?????????????????,????????。????????????????、???????。??????????????。????????????????,??????,??????,??????,??????????????,????,?????: ?????QQ:2281595668,?????,????,????。  ??????98???????????,???????????????????,????????????,????,??????????,?????????,?????????,????????????????,???????????,??????????: ?????QQ:2281595668,?????,????,????。?????????????????!????????????????????????????????????????????、?????????、??????、????????、????????????。??????????,???????????,???????: ??????????????QQ:2281595668,?????,????,????  ????? ????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,???????????: ?????QQ:2281595668,?????,????,????。??????????????????????????,??????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????;??????: ?????QQ:2281595668,?????,????,????。??????????????,?????????????????????????,????????????!?????????????????????????????????????????、???????、????、??????、??????????????: ???????????: ????????????: ????????????: ????????????: ????????????QQ:2281595668,?????,????,????  ???????????1998?????????。????????????,???????????????,?????????????,???????????,?2003?????????????,????????????????????????: ?????????????: ???????QQ:2281595668,?????,????,????。???????????????????!????????????????????????????????????????????、?????????、??????、????????、????????????。??????????,??????????????: ??????QQ:2281595668,?????,????,????。???????????????????????????,???????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????????: ?????QQ:2281595668,?????,????,????。??????????1998?????????。????????????,???????????????,?????????????,???????????,?2003?????????????,????????????????????????????????: ?????QQ:2281595668,?????,????,????。????????????????????????,????????????,??????98???????????,????,??????????,?????????.   ?????????,????????????????,????????????????: ?????QQ:2281595668,?????,????,????。?????????????????,????????。????????????????、???????。??????????????。????????????????,??????,??????,??????,??????????????,????,?????: ?????QQ:2281595668,?????,????,????。??????????????,?????????????????????,???????????????????????!?????????????????????????????????????????????、?????????、??????、??????: ?????QQ:2281595668,?????,????,????。??????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????,?????: ?????QQ:2281595668,?????,????,????。???????????????????,??1998?7??????,??????????,?????????,?????????????,??????????????????????. ????????????????????,???????????????: ?????QQ:2281595668,?????,????,????  ????????????????????,????????。????????????????、???????。??????????????。???????????????????,??????,??????,??????,??????????????????: ?????QQ:2281595668,?????,????,????。??????????1998?????????。????????????,???????????????,?????????????,???????????,?2003?????????????,?????????????????????????????????: ???????????: ?????QQ:2281595668,?????,????,????。??????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????,??????: ???????????: ?????QQ:2281595668,?????,????,????。??????????1998?????????。????????????,???????????????,?????????????,???????????,?2003?????????????,????????????????????????????????: ?????QQ:2281595668,?????,????,????。???????????????????,??????????????,????,?????????????????????,??????。??,??????????????????????。????????,????????????,??????,??????: ?????QQ:2281595668,?????,????,????。??????????????????????????,??????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????;??????: ?????QQ:2281595668,?????,????,????。????????????????????????,????????????,??????98???????????,????,??????????,?????????.   ?????????,????????????????,?????????????????: ??????QQ:2281595668,?????,????,????  ????? ????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,???????? ????????????: ?????????????QQ:2281595668,?????,????,????  ???????????????????,????????????,???????98???????????,????,??????????,?????????.   ?????????,????????????????,???????????: ?????QQ:2281595668,?????,????,????。??????????????????????????,??????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????;??????: ?????QQ:2281595668,?????,????,????  ?????2004?,??????????????,??????????????????。?????? ?????,????????????????,????????????。????,???????????,????,??“??????”?????????: ?????QQ:2281595668,?????,????,????。???????????????????,??????????????,????,?????????????????????,??????。???????,??????????????????????。????????,????????????,????????: ?????QQ:2281595668,?????,????,????。???????????????????,??????????????,????,?????????????????????,??????。??,??????????????????????。????????,????????????,??????,???????: ??????QQ:2281595668,?????,????,????。?????????????????????????,????????????,???????98???????????,????,??????????,?????????.   ?????????,????????????????,?????????????: ?????QQ:2281595668,?????,????,????。???????????????????,??????????????,????,?????????????????????,??????。??,??????????????????????。????????,????????????,??????,??????: ?????QQ:2281595668,?????,????,????。??????????????,?????????????????????,???????????????????????!?????????????????????????????????????????????、?????????、??????、??????: ??????????: ?????QQ:2281595668,?????,????,????。?????????????????,????????。????????????????、???????。??????????????。????????????????,??????,??????,??????,??????????????,????,??????: ???????????: ?????QQ:2281595668,?????,????,????。???????????????????,??????????????,????,?????????????????????,??????。??,??????????????????????。????????,????????????,??????,??????: ?????QQ:2281595668,?????,????,????  ???????????????????,????????????,??????98???????????,????,??????????,?????????.   ?????????,????????????????,???????????,????????: ?????QQ:2281595668,?????,????,????。??????????????,?????????????????????????,????????????!?????????????????????????????????????????、???????、????、??????、??????????????: ?????QQ:2281595668,?????,????,????。??????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????,??????: ???????????: ?????QQ:2281595668,?????,????,????。??????????????,?????????????????????,???????????????????????!?????????????????????????????????????????????、?????????、??????、???????: ?????????????: ??????????????QQ:2281595668,?????,????,????  ?????????????????????,??1998?7??????,??????????,?????????,?????????????,????????????????????????. ??????????????????????: ???????????: ????????????: ??????QQ:2281595668,?????,????,????  ???????????????????????????,???????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;???????: ?????QQ:2281595668,?????,????,????。?????????,??????????????????。?????? ?????,????????????????,????????????。????,???????????,????,??“??????”???? ?????,???????????????: ?????QQ:2281595668,?????,????,????  ??????????????????????????,??????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????;?????: ?????QQ:2281595668,?????,????,????。?????????????????????????,????????????!?????????????????????????????????????????、???????、????、??????、??????????。??????????????????: ?????QQ:2281595668,?????,????,????。?????????,??????????????????。?????? ?????,????????????????,????????????。????,???????????,????,??“??????”???? ?????,???????????????: ??????????: ?????QQ:2281595668,?????,????,????  ?????2004?,??????????????,??????????????????。?????? ?????,????????????????,????????????。????,???????????,????,??“??????”??????????: ??????QQ:2281595668,?????,????,????。???????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????????: ?????QQ:2281595668,?????,????,????。?????????,??????????????????。?????? ?????,????????????????,????????????。????,???????????,????,??“??????”???? ?????,????????????????: ????????????QQ:2281595668,?????,????,????  ????? ????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,?????????????: ?????QQ:2281595668,?????,????,????。?????????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,?????????????,????????: ?????QQ:2281595668,?????,????,????。  ??????98???????????,???????????????????,????????????,????,??????????,?????????,?????????,????????????????,???????????,??????????: ?????QQ:2281595668,?????,????,????  ??????????????,?????????????????????,???????????????????????!?????????????????????????????????????????????、?????????、??????、??????: ??????QQ:2281595668,?????,????,????  ???????????????????,????????????,???????98???????????,????,??????????,?????????.   ?????????,????????????????,???????????,???????: ????????????: ?????????????: hhhtbjzjgh??????: ??????QQ:2281595668,?????,????,????。??????????????????!????????????????????????????????????????????、?????????、??????、????????、????????????。??????????,???????????????: ?????QQ:2281595668,?????,????,????。??????????????,?????????????????????,???????????????????????!?????????????????????????????????????????????、?????????、??????、??????: ?????QQ:2281595668,?????,????,????。???????????????????,??????????????,????,?????????????????????,??????。??,??????????????????????。????????,????????????,??????,???????: ???????????: ?????QQ:2281595668,?????,????,????。??????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????,?????: ?????QQ:2281595668,?????,????,????。  ?????????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,?????????????,???????: ??????QQ:2281595668,?????,????,????。??????????????????!????????????????????????????????????????????、?????????、??????、????????、????????????。??????????,????????????????: ??????QQ:2281595668,?????,????,????  ???????????????????????????,???????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????????: ??????QQ:2281595668,?????,????,????  ???????????????????????????,???????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;???????: ?????QQ:2281595668,?????,????,????。???????????????????,??????????????,????,?????????????????????,??????。??,??????????????????????。????????,????????????,??????,???????: ??????QQ:2281595668,?????,????,????。???????????1998?????????。????????????,???????????????,?????????????,???????????,?2003?????????????,??????????????????????????????: ?????QQ:2281595668,?????,????,????。?????????????????!????????????????????????????????????????????、?????????、??????、????????、????????????。??????????,???????????,??????: ??????QQ:2281595668,?????,????,????。???????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????????: ?????QQ:2281595668,?????,????,????。??????????????????????????,??????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????;???????: ??????QQ:2281595668,?????,????,????。???????????????,?????????????????????,????????????????????????!??????????????????????????????????????????????、?????????、??????????: ????????????QQ:2281595668,?????,????,????  ???????????????,?????????????????????,????????????????????????!??????????????????????????????????????????????、?????????????: ???????????: ?????QQ:2281595668,?????,????,????。?????????????????,????????。????????????????、???????。??????????????。????????????????,??????,??????,??????,??????????????,????,?????: ?????QQ:2281595668,?????,????,????。?????????????????!????????????????????????????????????????????、?????????、??????、????????、????????????。??????????,???????????,?????: ?????QQ:2281595668,?????,????,????。???????????????????,??1998?7??????,??????????,?????????,?????????????,??????????????????????. ????????????????????,???????????????: ?????QQ:2281595668,?????,????,????  ??????????1998?????????。????????????,???????????????,?????????????,???????????,?2003?????????????,???????????????????????????????: tybjza?????: ?????QQ:2281595668,?????,????,????。?????????,??????????????????。?????? ?????,????????????????,????????????。????,???????????,????,??“??????”???? ?????,????????????????: ??????QQ:2281595668,?????,????,????。  ??????????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,??????????????????: ?????QQ:2281595668,?????,????,????。?????????????????,????????。????????????????、???????。??????????????。????????????????,??????,??????,??????,??????????????,????,????????: ????????QQ:2281595668,?????,????,????  ?????????????????????????????,?????????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;??????: ?????QQ:2281595668,?????,????,????。??????????????????????????,??????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????;??????: ?????QQ:2281595668,?????,????,????。??????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????,?????: ?????QQ:2281595668,?????,????,????。?????????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,?????????????,????????: ?????QQ:2281595668,?????,????,????。?????????????????,????????。????????????????、???????。??????????????。????????????????,??????,??????,??????,??????????????,????,??????: ????????????QQ:2281595668,?????,????,????  ???????????1998?????????。????????????,???????????????,?????????????,???????????,?2003?????????????,???????????????????????: ?????QQ:2281595668,?????,????,????。?????????????????????????,????????????!?????????????????????????????????????????、???????、????、??????、??????????。??????????????????: ?????QQ:2281595668,?????,????,????。?????????????????,????????。????????????????、???????。??????????????。????????????????,??????,??????,??????,??????????????,????,?????: ?????QQ:2281595668,?????,????,????。??????????1998?????????。????????????,???????????????,?????????????,???????????,?2003?????????????,????????????????????????????????: ?????QQ:2281595668,?????,????,????。???????????????????,??????????????,????,?????????????????????,??????。???????,??????????????????????。????????,????????????,????????: ?????QQ:2281595668,?????,????,????。?????????,??????????????????。?????? ?????,????????????????,????????????。????,???????????,????,??“??????”???? ?????,???????????????: ?????QQ:2281595668,?????,????,????。?????????????????!????????????????????????????????????????????、?????????、??????、????????、????????????。??????????,???????????,??????: ??????QQ:2281595668,?????,????,????。??????????????????????????,????????????!??????????????????????????????????????????、???????、????、??????、??????????。????????????????: ??????QQ:2281595668,?????,????,????。???????????????????????????,???????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????????: ????? QQ:2281595668,?????,????,????。????? ???????????????????,????????????,????? ?98???????????,????,??????????,?????????.   ?????????,????????????????,?????????????: ?????QQ:2281595668,?????,????,????。???????????????????,??1998?7??????,??????????,?????????,?????????????,??????????????????????. ????????????????????,????????????????: ???????????: ????? QQ:2281595668,?????,????,????。????? ?????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,???????????????: ??????QQ:2281595668,?????,????,????。??????????????????,????????。????????????????、???????。??????????????。?????????????????,??????,??????,??????,??????????????,???????: ?????QQ:2281595668,?????,????,????。??????????????,?????????????????????,???????????????????????!?????????????????????????????????????????????、?????????、??????、???????: ??????QQ:2281595668,?????,????,????  ????? ????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,???????? ????????????: ???????QQ:2281595668,?????,????,????  ???????????????????,????????????,????????98???????????,????,??????????,?????????.   ?????????,????????????????,?????????????????: ??????QQ:2281595668,?????,????,????。??????????????????,????????。????????????????、???????。??????????????。?????????????????,??????,??????,??????,??????????????,???????: ??????????: ?????QQ:2281595668,?????,????,????。??????????1998?????????。????????????,???????????????,?????????????,???????????,?2003?????????????,?????????????????????????????????: ????????????QQ:2281595668,?????,????,????  ?????2004?,??????????????,??????????????????。?????? ?????,????????????????,????????????。????,????????????,????,??“????????: ?????QQ:2281595668,?????,????,????。?????????????????,????????。????????????????、???????。??????????????。????????????????,??????,??????,??????,??????????????,????,??????: ???????????: ??????????: ?????QQ:2281595668,?????,????,????。??????????????,?????????????????????,???????????????????????!?????????????????????????????????????????????、?????????、??????、??????: ?????QQ:2281595668,?????,????,????  ????????????????????,????????。????????????????、???????。??????????????。???????????????????,??????,??????,??????,??????????????????: ?????QQ:2281595668,?????,????,????。??????????????????????????,??????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????;??????: ?????QQ:2281595668,?????,????,????。??????????1998?????????。????????????,???????????????,?????????????,???????????,?2003?????????????,?????????????????????????????????: ????????????: ??????QQ:2281595668,?????,????,????  ???????????????????????????,???????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;???????: ?????QQ:2281595668,?????,????,????。??????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????,??????: ??????QQ:2281595668,?????,????,????。???????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????????: ?????QQ:2281595668,?????,????,????。?????????????????????????,????????????!?????????????????????????????????????????、???????、????、??????、??????????。???????????????????: ????????????: ??????QQ:2281595668,?????,????,????。??????????????????,????????。????????????????、???????。??????????????。?????????????????,??????,??????,??????,??????????????,????????: ????????????QQ:2281595668,?????,????,????  ????????????????????,????????。????????????????、???????。??????????????。???????????????????,??????,??????,??????,????????????: ??????QQ:2281595668,?????,????,????。??????????????????,????????。????????????????、???????。??????????????。?????????????????,??????,??????,??????,??????????????,???????: ?????QQ:2281595668,?????,????,????。?????????????????!????????????????????????????????????????????、?????????、??????、????????、????????????。??????????,???????????,??????: ???????????: ?????QQ:2281595668,?????,????,????。???????????????????,??????????????,????,?????????????????????,??????。??,??????????????????????。????????,????????????,??????,???????: ??????QQ:2281595668,?????,????,????。???????????1998?????????。????????????,???????????????,?????????????,???????????,?2003?????????????,???????????????????????????????: ????????????QQ:2281595668,?????,????,????  ?????2004?,??????????????,??????????????????。?????? ?????,????????????????,????????????。????,????????????,????,??“?????????: ???????????: ?????QQ:2281595668,?????,????,????。?????????????????,????????。????????????????、???????。??????????????。????????????????,??????,??????,??????,??????????????,????,?????: ??????????: ??????  ??????  ??????  ??????  ??????  ?????  ?????  ??????  ?????  ????????????: ??????QQ:2281595668,?????,????,????。??????????????????!????????????????????????????????????????????、?????????、??????、????????、????????????。??????????,????????????????: ??????QQ:2281595668,?????,????,????。  ??????????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,??????????????????: ?????QQ:2281595668,?????,????,????。?????????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,?????????????,?????????: ??????QQ:2281595668,?????,????,????。  ??????????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,??????????????????: ?????QQ:2281595668,?????,????,????。?????????????????!????????????????????????????????????????????、?????????、??????、????????、????????????。??????????,???????????,??????: ???????????: ?????QQ:2281595668,?????,????,????。?????????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,?????????????,????????: ???????????: ??????QQ:2281595668,?????,????,????。??????????????????????????,????????????!??????????????????????????????????????????、???????、????、??????、??????????。???????????????: ?????QQ:2281595668,?????,????,????。?????????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,?????????????,?????????: ???????????: ?????QQ:2281595668,?????,????,????。??????????????????????????,??????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????;???????: ????????????: ??????QQ:2281595668,?????,????,????  ????????????????????,????????。????????????????、???????。??????????????。???????????????????,??????,??????,??????,???????????????????: ??????????????QQ:2281595668,?????,????,????  ???????????????????,????????????,????????98???????????,????,??????????,?????????.   ?????????,????????????????,?????????: ??????????: ?????QQ:2281595668,?????,????,????。??????????????,?????????????????????????,????????????!?????????????????????????????????????????、???????、????、??????、??????????????: ???????????: ??????QQ:2281595668,?????,????,????  ?????2004?,??????????????,??????????????????。?????? ?????,????????????????,????????????。????,????????????,????,??“??????”????????: ???????????: ?????QQ:2281595668,?????,????,????。  ??????98???????????,???????????????????,????????????,????,??????????,?????????,?????????,????????????????,???????????,??????????: ?????QQ:2281595668,?????,????,????  ??????????????????????????,??????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????;?????: ??????????QQ:2281595668,?????,????,????  ??????????1998?????????。????????????,???????????????,?????????????,???????????,?2003?????????????,??????????????????????????: ?????QQ:2281595668,?????,????,????。?????????????????!????????????????????????????????????????????、?????????、??????、????????、????????????。??????????,???????????,?????: ?????QQ:2281595668,?????,????,????  ????????????????????,????????。????????????????、???????。??????????????。???????????????????,??????,??????,??????,???????????????????: ??????QQ:2281595668,?????,????,????。???????????????????????????,???????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;?????????: ???????????: ?????QQ:2281595668,?????,????,????。??????????????,?????????????????????,???????????????????????!?????????????????????????????????????????????、?????????、??????、??????: ?????QQ:2281595668,?????,????,????。??????????????,?????????????????????,???????????????????????!?????????????????????????????????????????????、?????????、??????、???????: ??????QQ:2281595668,?????,????,????。??????????????????,????????。????????????????、???????。??????????????。?????????????????,??????,??????,??????,??????????????,???????: ?????QQ:2281595668,?????,????,????。???????????????????,??????????????,????,?????????????????????,??????。???????,??????????????????????。????????,????????????,?????????: ??????QQ:2281595668,?????,????,????。???????????????????????????,???????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;?????????: ????????????: ?????????????: ???????QQ:2281595668,?????,????,????  ????????????????????????????,????????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;??????????: ??????QQ:2281595668,?????,????,????。????????????????????,??????????????,????,?????????????????????,??????。????????,??????????????????????。????????,????????????,?????: ???????????: ?????? ??????: ??????QQ:2281595668,?????,????,????。????????????????????,??????????????,????,?????????????????????,??????。??,??????????????????????。????????,????????????,????????????: ??????QQ:2281595668,?????,????,????。?????????????????????????,????????????,???????98???????????,????,??????????,?????????.   ?????????,????????????????,?????????????: ?????QQ:2281595668,?????,????,????。???????????????????,??????????????,????,?????????????????????,??????。??,??????????????????????。????????,????????????,??????,???????: ????????????: ????????????QQ:2281595668,?????,????,????  ????????????????????,????????。????????????????、???????。??????????????。???????????????????,??????,??????,??????,????????????: ??????QQ:2281595668,?????,????,????  ?????2004?,??????????????,??????????????????。?????? ?????,????????????????,????????????。????,????????????,????,??“??????”???????: ?????QQ:2281595668,?????,????,????。?????????????????,????????。????????????????、???????。??????????????。????????????????,??????,??????,??????,??????????????,????,??????: ???????????: ?????QQ:2281595668,?????,????,????。??????????1998?????????。????????????,???????????????,?????????????,???????????,?2003?????????????,????????????????????????????????: ?????QQ:2281595668,?????,????,????。???????????????????,??????????????,????,?????????????????????,??????。???????,??????????????????????。????????,????????????,????????: ?????QQ:2281595668,?????,????,????。?????????????????!????????????????????????????????????????????、?????????、??????、????????、????????????。??????????,???????????,?????: ?????QQ:2281595668,?????,????,????。?????????????????!????????????????????????????????????????????、?????????、??????、????????、????????????。??????????,???????????,???????: ??????????????QQ:2281595668,?????,????,????  ????????????????????,????????。????????????????、???????。??????????????。???????????????????,??????,??????,??????,?????????: ?????QQ:2281595668,?????,????,????。?????????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,?????????????,?????????: ????????????QQ:2281595668,?????,????,????  ???????????????,?????????????????????,????????????????????????!??????????????????????????????????????????????、?????????????: ???????????: ?????QQ:2281595668,?????,????,????。?????????,??????????????????。?????? ?????,????????????????,????????????。????,???????????,????,??“??????”???? ?????,????????????????: ????????????: ???????????: ?????QQ:2281595668,?????,????,????。??????????????,?????????????????????,???????????????????????!?????????????????????????????????????????????、?????????、??????、??????: ?????QQ:2281595668,?????,????,????。  ??????98???????????,???????????????????,????????????,????,??????????,?????????,?????????,????????????????,???????????,??????????: ?????QQ:2281595668,?????,????,????。?????????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,?????????????,?????????: ??????QQ:2281595668,?????,????,????。???????????????,?????????????????????,????????????????????????!??????????????????????????????????????????????、?????????、?????????: ?????QQ:2281595668,?????,????,????。???????????????????,??????????????,????,?????????????????????,??????。??,??????????????????????。????????,????????????,??????,?????????: ????????????????QQ:2281595668,?????,????,????  ?????2004?,??????????????,??????????????????。?????? ?????,????????????????,????????????。????,??????????????,????,??????: ???????????: ?????QQ:2281595668,?????,????,????。?????????????????,????????。????????????????、???????。??????????????。????????????????,??????,??????,??????,??????????????,????,?????: ?????QQ:2281595668,?????,????,????。?????????????????,????????。????????????????、???????。??????????????。????????????????,??????,??????,??????,??????????????,????,?????: ?????QQ:2281595668,?????,????,????。??????????????????????????,??????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????;??????: ??????????: ???????????: ????????????: ??????QQ:2281595668,?????,????,????。???????????????,?????????????????????,????????????????????????!??????????????????????????????????????????????、?????????、???????????: ???????QQ:2281595668,?????,????,????。  ???????????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,?????????????????: ???????????: ?????QQ:2281595668,?????,????,????。???????????????????,??1998?7??????,??????????,?????????,?????????????,??????????????????????. ????????????????????,???????????????: ?????QQ:2281595668,?????,????,????。?????????????????,????????。????????????????、???????。??????????????。????????????????,??????,??????,??????,??????????????,????,??????: ??????QQ:2281595668,?????,????,????  ????????????????????,????????。????????????????、???????。??????????????。???????????????????,??????,??????,??????,??????????????????: ??????QQ:2281595668,?????,????,????  ????????????????????,????????。????????????????、???????。??????????????。???????????????????,??????,??????,??????,??????????????????: ??????QQ:2281595668,?????,????,????。?????????????????????????,????????????,???????98???????????,????,??????????,?????????.   ?????????,????????????????,?????????????: ?????QQ:2281595668,?????,????,????。?????????????????,????????。????????????????、???????。??????????????。????????????????,??????,??????,??????,??????????????,????,?????: ???????????: ???????????: ?????QQ:2281595668,?????,????,????  ????? ????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,???????? ?????,?????: ?????QQ:2281595668,?????,????,????。??????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????,??????: ??????QQ:2281595668,?????,????,????  ???????????????????????????,???????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;???????: ?????QQ:2281595668,?????,????,????。  ?????????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,?????????????,??????: ?????QQ:2281595668,?????,????,????。??????????????????????????,??????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????;???????: ??????QQ:2281595668,?????,????,????  ????????????????????,??1998?7??????,??????????,?????????,?????????????,???????????????????????. ????????????????????,????????????: ???????????: ?????QQ:2281595668,?????,????,????。??????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????,?????: ?????QQ:2281595668,?????,????,????。?????????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,?????????????,?????????: ????????????: ????????????QQ:2281595668,?????,????,????  ????????????????????,????????。????????????????、???????。??????????????。???????????????????,??????,??????,??????,???????????: ?????QQ:2281595668,?????,????,????。?????????????????????????,????????????!?????????????????????????????????????????、???????、????、??????、??????????。???????????????????: ???????????: ?????QQ:2281595668,?????,????,????。?????????????????,????????。????????????????、???????。??????????????。????????????????,??????,??????,??????,??????????????,????,??????: ??????QQ:2281595668,?????,????,????  ????????????????????,????????。????????????????、???????。??????????????。???????????????????,??????,??????,??????,??????????????????: ????????????: ??????QQ:2281595668,?????,????,????  ???????????????,?????????????????????,????????????????????????!??????????????????????????????????????????????、?????????、????????: ?????QQ:2281595668,?????,????,????。???????????????????,??????????????,????,?????????????????????,??????。??,??????????????????????。????????,????????????,??????,??????: ?????QQ:2281595668,?????,????,????。?????????????????,????????。????????????????、???????。??????????????。????????????????,??????,??????,??????,??????????????,????,?????: ?????QQ:2281595668,?????,????,????。??????????????????????????,??????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????;??????: ?????QQ:2281595668,?????,????,????。??????????????,?????????????????????????,????????????!?????????????????????????????????????????、???????、????、??????、??????????????: ?????QQ:2281595668,?????,????,????。??????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????,??????: ????????????QQ:2281595668,?????,????,????  ????? ????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,?????????????: ?????QQ:2281595668,?????,????,????。  ??????98???????????,???????????????????,????????????,????,??????????,?????????,?????????,????????????????,???????????,??????????: ???????????: ????????????: ??????QQ:2281595668,?????,????,????。  ???????98???????????,???????????????????,????????????,????,??????????,?????????,?????????,????????????????,???????????,????????: ?????QQ:2281595668,?????,????,????  ????????????????????,????????。????????????????、???????。??????????????。???????????????????,??????,??????,??????,???????????????????: ????????????QQ:2281595668,?????,????,????  ????? ????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,??????????????: ????????????QQ:2281595668,?????,????,????  ????? ????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,???????????????: ???????QQ:2281595668,?????,????,????。?????????????????????,??????????????,????,?????????????????????,??????。??,??????????????????????。????????,????????????,??????????: ???????????: ?????QQ:2281595668,?????,????,????。?????????????????,????????。????????????????、???????。??????????????。????????????????,??????,??????,??????,??????????????,????,??????: ??????????????: ????????QQ:2281595668,?????,????,????  ?????????????1998?????????。????????????,???????????????,?????????????,???????????,?2003?????????????,?????????????????????????: ?????QQ:2281595668,?????,????,????。??????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????,?????: ?????QQ:2281595668,?????,????,????。???????????????????,??????????????,????,?????????????????????,??????。??,??????????????????????。????????,????????????,??????,??????: ?????QQ:2281595668,?????,????,????。????????????????????????,????????????,??????98???????????,????,??????????,?????????.   ?????????,????????????????,?????????????????: ????????????: ?????QQ:2281595668,?????,????,????  ????????????????????,????????。????????????????、???????。??????????????。???????????????????,??????,??????,??????,??????????????????: ?????QQ:2281595668,?????,????,????。??????????????????????????,??????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????;???????: ????????????QQ:2281595668,?????,????,????  ???????????????????????????,???????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;??????: ?????QQ:2281595668,?????,????,????。??????????????,?????????????????????,???????????????????????!?????????????????????????????????????????????、?????????、??????、??????: ?????QQ:2281595668,?????,????,????。  ?????????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,?????????????,???????: ???????????: ?????QQ:2281595668,?????,????,????。  ??????98???????????,???????????????????,????????????,????,??????????,?????????,?????????,????????????????,???????????,??????????: ?????QQ:2281595668,?????,????,????。  ??????98???????????,???????????????????,????????????,????,??????????,?????????,?????????,????????????????,???????????,??????????: ?????QQ:2281595668,?????,????,????。?????????????????!????????????????????????????????????????????、?????????、??????、????????、????????????。??????????,???????????,??????: ????????????: ???????????: ?????QQ:2281595668,?????,????,????。?????????????????????????,????????????!?????????????????????????????????????????、???????、????、??????、??????????。???????????????????: ??????QQ:2281595668,?????,????,????  ???????????????,?????????????????????,????????????????????????!??????????????????????????????????????????????、?????????、??????????: ???????QQ:2281595668,?????,????,????  ????? ????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,???????? ?????????: ?????QQ:2281595668,?????,????,????  ???????????????????,????????????,??????98???????????,????,??????????,?????????.   ?????????,????????????????,???????????,????????: ??????????: ?????QQ:2281595668,?????,????,????  ?????2004?,??????????????,??????????????????。?????? ?????,????????????????,????????????。????,???????????,????,??“??????”?????????: ?????QQ:2281595668,?????,????,????。???????????????????,??1998?7??????,??????????,?????????,?????????????,??????????????????????. ????????????????????,???????????????: ?????QQ:2281595668,?????,????,????  ????? ????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,???????? ?????,??????: ???????????: ?????QQ:2281595668,?????,????,????。???????????????????,??????????????,????,?????????????????????,??????。??,??????????????????????。????????,????????????,??????,???????: ????????????: ??????QQ:2281595668,?????,????,????  ????????????????????,????????。????????????????、???????。??????????????。???????????????????,??????,??????,??????,??????????????????: ??????QQ:2281595668,?????,????,????。???????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,???????????????: ??????QQ:2281595668,?????,????,????  ????????????????????,??1998?7??????,??????????,?????????,?????????????,???????????????????????. ????????????????????,???????????: ?????QQ:2281595668,?????,????,????  ?????2004?,??????????????,??????????????????。?????? ?????,????????????????,????????????。????,???????????,????,??“??????”?????????: ?????????????????: ??????????????????: ????????????QQ:2281595668,?????,????,????  ????? ????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,?????????????: ?????QQ:2281595668,?????,????,????。??????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????,?????: ?????QQ:2281595668,?????,????,????。??????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????,??????: ???????????: ?????QQ:2281595668,?????,????,????。?????????????????!????????????????????????????????????????????、?????????、??????、????????、????????????。??????????,???????????,??????: ????????????QQ:2281595668,?????,????,????  ?????2004?,??????????????,??????????????????。?????? ?????,????????????????,????????????。????,????????????,????,??“????????: ?????QQ:2281595668,?????,????,????。?????????????????????????,????????????!?????????????????????????????????????????、???????、????、??????、??????????。??????????????????: ?????QQ:2281595668,?????,????,????。?????????,??????????????????。?????? ?????,????????????????,????????????。????,???????????,????,??“??????”???? ?????,???????????????: ?????QQ:2281595668,?????,????,????。?????????????????,????????。????????????????、???????。??????????????。????????????????,??????,??????,??????,??????????????,????,??????: ????????????: ??????QQ:2281595668,?????,????,????  ????? ????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,???????? ??????????: ?????QQ:2281595668,?????,????,????  ????? ????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,???????? ?????,?????: ?????QQ:2281595668,?????,????,????。??????????????,?????????????????????,???????????????????????!?????????????????????????????????????????????、?????????、??????、???????: ??????QQ:2281595668,?????,????,????  ???????????????????????????,???????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????????: ??????QQ:2281595668,?????,????,????  ???????????????????????????,???????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????????: ??????QQ:2281595668,?????,????,????  ????? ????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,???????? ??????????: ?????QQ:2281595668,?????,????,????。??????????????,?????????????????????????,????????????!?????????????????????????????????????????、???????、????、??????、???????????????: ??????QQ:2281595668,?????,????,????。???????????????????????????,???????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;?????????: ????????????: ???????????: ?????QQ:2281595668,?????,????,????。??????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????,?????: ?????QQ:2281595668,?????,????,????。?????????????????,????????。????????????????、???????。??????????????。????????????????,??????,??????,??????,??????????????,????,?????: ??????????: ????????????: ????????????: ??????????: ????? QQ:2281595668,?????,????,????。????? ?????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,???????????????: ??????QQ:2281595668,?????,????,????。????????????????????,??????????????,????,?????????????????????,??????。????????,??????????????????????。????????,????????????,??????: ??????QQ:2281595668,?????,????,????  ???????????????????????????,???????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;???????: ?????QQ:2281595668,?????,????,????。?????????????????!????????????????????????????????????????????、?????????、??????、????????、????????????。??????????,???????????,??????: ??????QQ:2281595668,?????,????,????  ???????????????????,????????????,???????98???????????,????,??????????,?????????.   ?????????,????????????????,???????????,??????: ?????QQ:2281595668,?????,????,????。???????????????????,??????????????,????,?????????????????????,??????。??,??????????????????????。????????,????????????,??????,???????: ??????QQ:2281595668,?????,????,????。????????????????????,??????????????,????,?????????????????????,??????。????????,??????????????????????。????????,????????????,????????: ????????QQ:2281595668,?????,????,????  ????????????????????,????????。????????????????、???????。??????????????。???????????????????,??????,??????,??????,??????????????????: ????????QQ:2281595668,?????,????,????  ?????2004?,??????????????,??????????????????。?????? ?????,????????????????,????????????。????,??????????????,????,??“???????????: ???????????: ?????QQ:2281595668,?????,????,????。??????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????,??????: ????????????: ??????QQ:2281595668,?????,????,????。????????????????????,??1998?7??????,??????????,?????????,?????????????,???????????????????????. ????????????????????,?????????????: ???????????: ?????QQ:2281595668,?????,????,????  ??????????1998?????????。????????????,???????????????,?????????????,???????????,?2003?????????????,???????????????????????????????: ?????QQ:2281595668,?????,????,????。??????????????????????????,??????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????;???????: ????????????QQ:2281595668,?????,????,????  ????? ????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,??????????????: ??????QQ:2281595668,?????,????,????。??????????????????,????????。????????????????、???????。??????????????。?????????????????,??????,??????,??????,??????????????,????????: ????????????: ????????????QQ:2281595668,?????,????,????  ?????2004?,??????????????,??????????????????。?????? ?????,????????????????,????????????。????,????????????,????,??“????????: ???????????: ?????????????: ???????QQ:2281595668,?????,????,????。????????????????,?????????????????????,?????????????????????????!???????????????????????????????????????????????、?????????、??????: ??????QQ:2281595668,?????,????,????。???????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????????: ?????QQ:2281595668,?????,????,????。??????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????,??????: ???????????: ?????QQ:2281595668,?????,????,????。???????????????????,??????????????,????,?????????????????????,??????。???????,??????????????????????。????????,????????????,?????????: ??????QQ:2281595668,?????,????,????。??????????????????????????,????????????!??????????????????????????????????????????、???????、????、??????、??????????。????????????????: ??????QQ:2281595668,?????,????,????。????????????????????,??????????????,????,?????????????????????,??????。????????,??????????????????????。????????,????????????,??????: ??????QQ:2281595668,?????,????,????。?????????????????????????,????????????,???????98???????????,????,??????????,?????????.   ?????????,????????????????,??????????????: ????????????: ???????????: ?????QQ:2281595668,?????,????,????。??????????????????????????,??????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????;???????: ????????????: ????????????: ??????QQ:2281595668,?????,????,????  ???????????????????,????????????,???????98???????????,????,??????????,?????????.   ?????????,????????????????,???????????,???????: ??????QQ:2281595668,?????,????,????。???????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,???????????????: ??????QQ:2281595668,?????,????,????。???????????????,?????????????????????,????????????????????????!??????????????????????????????????????????????、?????????、?????????: ?????QQ:2281595668,?????,????,????。??????????????,?????????????????????????,????????????!?????????????????????????????????????????、???????、????、??????、??????????????: ?????QQ:2281595668,?????,????,????。??????????????,?????????????????????????,????????????!?????????????????????????????????????????、???????、????、??????、???????????????: ??????QQ:2281595668,?????,????,????。???????????????????????????,???????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????????: ?????QQ:2281595668,?????,????,????  ????????????????????,????????。????????????????、???????。??????????????。???????????????????,??????,??????,??????,??????????????????: ?????QQ:2281595668,?????,????,????。  ?????????????、??、??、??????????????????,???????,???????,?????????????,??????????????,?????、??????????、??、???,?????????????,???????: ??????QQ:2281595668,?????,????,????。??????????????????!????????????????????????????????????????????、?????????、??????、????????、????????????。??????????,????????????????: ???????????: ?????QQ:2281595668,?????,????,????。  ??????98???????????,???????????????????,????????????,????,??????????,?????????,?????????,????????????????,???????????,??????????: ?????QQ:2281595668,?????,????,????。??????????1998?????????。????????????,???????????????,?????????????,???????????,?2003?????????????,?????????????????????????????????: ????????????: ????????????: ??????QQ:2281595668,?????,????,????。????????????????????,??????????????,????,?????????????????????,??????。??,??????????????????????。????????,????????????,????????????: ????????????: ???????????: ?????QQ:2281595668,?????,????,????。?????????,??????????????????。?????? ?????,????????????????,????????????。????,???????????,????,??“??????”???? ?????,???????????????: ?????QQ:2281595668,?????,????,????  ??????????????????????????,??????????,???????????????????????,???????:????,????;?????????????;??;??;????;????????;????;????;?????: ?????QQ:2281595668,?????,????,????。??????????????,??????、????、?????????????????????????,???????????? ??。???????????,??????????,???????????,????2000?,??????????,??????: ??????

    Read the article

  • Creating a thematic map

    - by jsharma
    This post describes how to create a simple thematic map, just a state population layer, with no underlying map tile layer. The map shows states color-coded by total population. The map is interactive with info-windows and can be panned and zoomed. The sample code demonstrates the following: Displaying an interactive vector layer with no background map tile layer (i.e. purpose and use of the Universe object) Using a dynamic (i.e. defined via the javascript client API) color bucket style Dynamically changing a layer's rendering style Specifying which attribute value to use in determining the bucket, and hence style, for a feature (FoI) The result is shown in the screenshot below. The states layer was defined, and stored in the user_sdo_themes view of the mvdemo schema, using MapBuilder. The underlying table is defined as SQL> desc states_32775  Name                                      Null?    Type ----------------------------------------- -------- ----------------------------  STATE                                              VARCHAR2(26)  STATE_ABRV                                         VARCHAR2(2) FIPSST                                             VARCHAR2(2) TOTPOP                                             NUMBER PCTSMPLD                                           NUMBER LANDSQMI                                           NUMBER POPPSQMI                                           NUMBER ... MEDHHINC NUMBER AVGHHINC NUMBER GEOM32775 MDSYS.SDO_GEOMETRY We'll use the TOTPOP column value in the advanced (color bucket) style for rendering the states layers. The predefined theme (US_STATES_BI) is defined as follows. SQL> select styling_rules from user_sdo_themes where name='US_STATES_BI'; STYLING_RULES -------------------------------------------------------------------------------- <?xml version="1.0" standalone="yes"?> <styling_rules highlight_style="C.CB_QUAL_8_CLASS_DARK2_1"> <hidden_info> <field column="STATE" name="Name"/> <field column="POPPSQMI" name="POPPSQMI"/> <field column="TOTPOP" name="TOTPOP"/> </hidden_info> <rule column="TOTPOP"> <features style="states_totpop"> </features> <label column="STATE_ABRV" style="T.BLUE_SERIF_10"> 1 </label> </rule> </styling_rules> SQL> The theme definition specifies that the state, poppsqmi, totpop, state_abrv, and geom columns will be queried from the states_32775 table. The state_abrv value will be used to label the state while the totpop value will be used to determine the color-fill from those defined in the states_totpop advanced style. The states_totpop style, which we will not use in our demo, is defined as shown below. SQL> select definition from user_sdo_styles where name='STATES_TOTPOP'; DEFINITION -------------------------------------------------------------------------------- <?xml version="1.0" ?> <AdvancedStyle> <BucketStyle> <Buckets default_style="C.S02_COUNTRY_AREA"> <RangedBucket seq="0" label="10K - 5M" low="10000" high="5000000" style="C.SEQ6_01" /> <RangedBucket seq="1" label="5M - 12M" low="5000001" high="1.2E7" style="C.SEQ6_02" /> <RangedBucket seq="2" label="12M - 20M" low="1.2000001E7" high="2.0E7" style="C.SEQ6_04" /> <RangedBucket seq="3" label="&gt; 20M" low="2.0000001E7" high="5.0E7" style="C.SEQ6_05" /> </Buckets> </BucketStyle> </AdvancedStyle> SQL> The demo defines additional advanced styles via the OM.style object and methods and uses those instead when rendering the states layer.   Now let's look at relevant snippets of code that defines the map extent and zoom levels (i.e. the OM.universe),  loads the states predefined vector layer (OM.layer), and sets up the advanced (color bucket) style. Defining the map extent and zoom levels. function initMap() {   //alert("Initialize map view");     // define the map extent and number of zoom levels.   // The Universe object is similar to the map tile layer configuration   // It defines the map extent, number of zoom levels, and spatial reference system   // well-known ones (like web mercator/google/bing or maps.oracle/elocation are predefined   // The Universe must be defined when there is no underlying map tile layer.   // When there is a map tile layer then that defines the map extent, srid, and zoom levels.      var uni= new OM.universe.Universe(     {         srid : 32775,         bounds : new OM.geometry.Rectangle(                         -3280000, 170000, 2300000, 3200000, 32775),         numberOfZoomLevels: 8     }); The srid specifies the spatial reference system which is Equal-Area Projection (United States). SQL> select cs_name from cs_srs where srid=32775 ; CS_NAME --------------------------------------------------- Equal-Area Projection (United States) The bounds defines the map extent. It is a Rectangle defined using the lower-left and upper-right coordinates and srid. Loading and displaying the states layer This is done in the states() function. The full code is at the end of this post, however here's the snippet which defines the states VectorLayer.     // States is a predefined layer in user_sdo_themes     var  layer2 = new OM.layer.VectorLayer("vLayer2",     {         def:         {             type:OM.layer.VectorLayer.TYPE_PREDEFINED,             dataSource:"mvdemo",             theme:"us_states_bi",             url: baseURL,             loadOnDemand: false         },         boundingTheme:true      }); The first parameter is a layer name, the second is an object literal for a layer config. The config object has two attributes: the first is the layer definition, the second specifies whether the layer is a bounding one (i.e. used to determine the current map zoom and center such that the whole layer is displayed within the map window) or not. The layer config has the following attributes: type - specifies whether is a predefined one, a defined via a SQL query (JDBC), or in a json-format file (DATAPACK) theme - is the predefined theme's name url - is the location of the mapviewer server loadOnDemand - specifies whether to load all the features or just those that lie within the current map window and load additional ones as needed on a pan or zoom The code snippet below dynamically defines an advanced style and then uses it, instead of the 'states_totpop' style, when rendering the states layer. // override predefined rendering style with programmatic one    var theRenderingStyle =      createBucketColorStyle('YlBr5', colorSeries, 'States5', true);   // specify which attribute is used in determining the bucket (i.e. color) to use for the state   // It can be an array because the style could be a chart type (pie/bar)   // which requires multiple attribute columns     // Use the STATE.TOTPOP column (aka attribute) value here    layer2.setRenderingStyle(theRenderingStyle, ["TOTPOP"]); The style itself is defined in the createBucketColorStyle() function. Dynamically defining an advanced style The advanced style used here is a bucket color style, i.e. a color style is associated with each bucket. So first we define the colors and then the buckets.     numClasses = colorSeries[colorName].classes;    // create Color Styles    for (var i=0; i < numClasses; i++)    {         theStyles[i] = new OM.style.Color(                      {fill: colorSeries[colorName].fill[i],                        stroke:colorSeries[colorName].stroke[i],                       strokeOpacity: useGradient? 0.25 : 1                      });    }; numClasses is the number of buckets. The colorSeries array contains the color fill and stroke definitions and is: var colorSeries = { //multi-hue color scheme #10 YlBl. "YlBl3": {   classes:3,                  fill: [0xEDF8B1, 0x7FCDBB, 0x2C7FB8],                  stroke:[0xB5DF9F, 0x72B8A8, 0x2872A6]   }, "YlBl5": {   classes:5,                  fill:[0xFFFFCC, 0xA1DAB4, 0x41B6C4, 0x2C7FB8, 0x253494],                  stroke:[0xE6E6B8, 0x91BCA2, 0x3AA4B0, 0x2872A6, 0x212F85]   }, //multi-hue color scheme #11 YlBr.  "YlBr3": {classes:3,                  fill:[0xFFF7BC, 0xFEC44F, 0xD95F0E],                  stroke:[0xE6DEA9, 0xE5B047, 0xC5360D]   }, "YlBr5": {classes:5,                  fill:[0xFFFFD4, 0xFED98E, 0xFE9929, 0xD95F0E, 0x993404],                  stroke:[0xE6E6BF, 0xE5C380, 0xE58A25, 0xC35663, 0x8A2F04]     }, etc. Next we create the bucket style.    bucketStyleDef = {       numClasses : colorSeries[colorName].classes, //      classification: 'custom',  //since we are supplying all the buckets //      buckets: theBuckets,       classification: 'logarithmic',  // use a logarithmic scale       styles: theStyles,       gradient:  useGradient? 'linear' : 'off' //      gradient:  useGradient? 'radial' : 'off'     };    theBucketStyle = new OM.style.BucketStyle(bucketStyleDef);    return theBucketStyle; A BucketStyle constructor takes a style definition as input. The style definition specifies the number of buckets (numClasses), a classification scheme (which can be equal-ranged, logarithmic scale, or custom), the styles for each bucket, whether to use a gradient effect, and optionally the buckets (required when using a custom classification scheme). The full source for the demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Oracle Maps V2 Thematic Map Demo</title> <script src="http://localhost:8080/mapviewer/jslib/v2/oraclemapsv2.js" type="text/javascript"> </script> <script type="text/javascript"> //var $j = jQuery.noConflict(); var baseURL="http://localhost:8080/mapviewer"; // location of mapviewer OM.gv.proxyEnabled =false; // no mvproxy needed OM.gv.setResourcePath(baseURL+"/jslib/v2/images/"); // location of resources for UI elements like nav panel buttons var map = null; // the client mapviewer object var statesLayer = null, stateCountyLayer = null; // The vector layers for states and counties in a state var layerName="States"; // initial map center and zoom var mapCenterLon = -20000; var mapCenterLat = 1750000; var mapZoom = 2; var mpoint = new OM.geometry.Point(mapCenterLon,mapCenterLat,32775); var currentPalette = null, currentStyle=null; // set an onchange listener for the color palette select list // initialize the map // load and display the states layer $(document).ready( function() { $("#demo-htmlselect").change(function() { var theColorScheme = $(this).val(); useSelectedColorScheme(theColorScheme); }); initMap(); states(); } ); /** * color series from ColorBrewer site (http://colorbrewer2.org/). */ var colorSeries = { //multi-hue color scheme #10 YlBl. "YlBl3": { classes:3, fill: [0xEDF8B1, 0x7FCDBB, 0x2C7FB8], stroke:[0xB5DF9F, 0x72B8A8, 0x2872A6] }, "YlBl5": { classes:5, fill:[0xFFFFCC, 0xA1DAB4, 0x41B6C4, 0x2C7FB8, 0x253494], stroke:[0xE6E6B8, 0x91BCA2, 0x3AA4B0, 0x2872A6, 0x212F85] }, //multi-hue color scheme #11 YlBr. "YlBr3": {classes:3, fill:[0xFFF7BC, 0xFEC44F, 0xD95F0E], stroke:[0xE6DEA9, 0xE5B047, 0xC5360D] }, "YlBr5": {classes:5, fill:[0xFFFFD4, 0xFED98E, 0xFE9929, 0xD95F0E, 0x993404], stroke:[0xE6E6BF, 0xE5C380, 0xE58A25, 0xC35663, 0x8A2F04] }, // single-hue color schemes (blues, greens, greys, oranges, reds, purples) "Purples5": {classes:5, fill:[0xf2f0f7, 0xcbc9e2, 0x9e9ac8, 0x756bb1, 0x54278f], stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3] }, "Blues5": {classes:5, fill:[0xEFF3FF, 0xbdd7e7, 0x68aed6, 0x3182bd, 0x18519C], stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3] }, "Greens5": {classes:5, fill:[0xedf8e9, 0xbae4b3, 0x74c476, 0x31a354, 0x116d2c], stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3] }, "Greys5": {classes:5, fill:[0xf7f7f7, 0xcccccc, 0x969696, 0x636363, 0x454545], stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3] }, "Oranges5": {classes:5, fill:[0xfeedde, 0xfdb385, 0xfd8d3c, 0xe6550d, 0xa63603], stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3] }, "Reds5": {classes:5, fill:[0xfee5d9, 0xfcae91, 0xfb6a4a, 0xde2d26, 0xa50f15], stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3] } }; function createBucketColorStyle( colorName, colorSeries, rangeName, useGradient) { var theBucketStyle; var bucketStyleDef; var theStyles = []; var theColors = []; var aBucket, aStyle, aColor, aRange; var numClasses ; numClasses = colorSeries[colorName].classes; // create Color Styles for (var i=0; i < numClasses; i++) { theStyles[i] = new OM.style.Color( {fill: colorSeries[colorName].fill[i], stroke:colorSeries[colorName].stroke[i], strokeOpacity: useGradient? 0.25 : 1 }); }; bucketStyleDef = { numClasses : colorSeries[colorName].classes, // classification: 'custom', //since we are supplying all the buckets // buckets: theBuckets, classification: 'logarithmic', // use a logarithmic scale styles: theStyles, gradient: useGradient? 'linear' : 'off' // gradient: useGradient? 'radial' : 'off' }; theBucketStyle = new OM.style.BucketStyle(bucketStyleDef); return theBucketStyle; } function initMap() { //alert("Initialize map view"); // define the map extent and number of zoom levels. // The Universe object is similar to the map tile layer configuration // It defines the map extent, number of zoom levels, and spatial reference system // well-known ones (like web mercator/google/bing or maps.oracle/elocation are predefined // The Universe must be defined when there is no underlying map tile layer. // When there is a map tile layer then that defines the map extent, srid, and zoom levels. var uni= new OM.universe.Universe( { srid : 32775, bounds : new OM.geometry.Rectangle( -3280000, 170000, 2300000, 3200000, 32775), numberOfZoomLevels: 8 }); map = new OM.Map( document.getElementById('map'), { mapviewerURL: baseURL, universe:uni }) ; var navigationPanelBar = new OM.control.NavigationPanelBar(); map.addMapDecoration(navigationPanelBar); } // end initMap function states() { //alert("Load and display states"); layerName = "States"; if(statesLayer) { // states were already visible but the style may have changed // so set the style to the currently selected one var theData = $('#demo-htmlselect').val(); setStyle(theData); } else { // States is a predefined layer in user_sdo_themes var layer2 = new OM.layer.VectorLayer("vLayer2", { def: { type:OM.layer.VectorLayer.TYPE_PREDEFINED, dataSource:"mvdemo", theme:"us_states_bi", url: baseURL, loadOnDemand: false }, boundingTheme:true }); // add drop shadow effect and hover style var shadowFilter = new OM.visualfilter.DropShadow({opacity:0.5, color:"#000000", offset:6, radius:10}); var hoverStyle = new OM.style.Color( {stroke:"#838383", strokeThickness:2}); layer2.setHoverStyle(hoverStyle); layer2.setHoverVisualFilter(shadowFilter); layer2.enableFeatureHover(true); layer2.enableFeatureSelection(false); layer2.setLabelsVisible(true); // override predefined rendering style with programmatic one var theRenderingStyle = createBucketColorStyle('YlBr5', colorSeries, 'States5', true); // specify which attribute is used in determining the bucket (i.e. color) to use for the state // It can be an array because the style could be a chart type (pie/bar) // which requires multiple attribute columns // Use the STATE.TOTPOP column (aka attribute) value here layer2.setRenderingStyle(theRenderingStyle, ["TOTPOP"]); currentPalette = "YlBr5"; var stLayerIdx = map.addLayer(layer2); //alert('State Layer Idx = ' + stLayerIdx); map.setMapCenter(mpoint); map.setMapZoomLevel(mapZoom) ; // display the map map.init() ; statesLayer=layer2; // add rt-click event listener to show counties for the state layer2.addListener(OM.event.MouseEvent.MOUSE_RIGHT_CLICK,stateRtClick); } // end if } // end states function setStyle(styleName) { // alert("Selected Style = " + styleName); // there may be a counties layer also displayed. // that wll have different bucket ranges so create // one style for states and one for counties var newRenderingStyle = null; if (layerName === "States") { if(/3/.test(styleName)) { newRenderingStyle = createBucketColorStyle(styleName, colorSeries, 'States3', false); currentStyle = createBucketColorStyle(styleName, colorSeries, 'Counties3', false); } else { newRenderingStyle = createBucketColorStyle(styleName, colorSeries, 'States5', false); currentStyle = createBucketColorStyle(styleName, colorSeries, 'Counties5', false); } statesLayer.setRenderingStyle(newRenderingStyle, ["TOTPOP"]); if (stateCountyLayer) stateCountyLayer.setRenderingStyle(currentStyle, ["TOTPOP"]); } } // end setStyle function stateRtClick(evt){ var foi = evt.feature; //alert('Rt-Click on State: ' + foi.attributes['_label_'] + // ' with pop ' + foi.attributes['TOTPOP']); // display another layer with counties info // layer may change on each rt-click so create and add each time. var countyByState = null ; // the _label_ attribute of a feature in this case is the state abbreviation // we will use that to query and get the counties for a state var sqlText = "select totpop,geom32775 from counties_32775_moved where state_abrv="+ "'"+foi.getAttributeValue('_label_')+"'"; // alert(sqlText); if (currentStyle === null) currentStyle = createBucketColorStyle('YlBr5', colorSeries, 'Counties5', false); /* try a simple style instead new OM.style.ColorStyle( { stroke: "#B8F4FF", fill: "#18E5F4", fillOpacity:0 } ); */ // remove existing layer if any if(stateCountyLayer) map.removeLayer(stateCountyLayer); countyByState = new OM.layer.VectorLayer("stCountyLayer", {def:{type:OM.layer.VectorLayer.TYPE_JDBC, dataSource:"mvdemo", sql:sqlText, url:baseURL}}); // url:baseURL}, // renderingStyle:currentStyle}); countyByState.setVisible(true); // specify which attribute is used in determining the bucket (i.e. color) to use for the state countyByState.setRenderingStyle(currentStyle, ["TOTPOP"]); var ctLayerIdx = map.addLayer(countyByState); // alert('County Layer Idx = ' + ctLayerIdx); //map.addLayer(countyByState); stateCountyLayer = countyByState; } // end stateRtClick function useSelectedColorScheme(theColorScheme) { if(map) { // code to update renderStyle goes here //alert('will try to change render style'); setStyle(theColorScheme); } else { // do nothing } } </script> </head> <body bgcolor="#b4c5cc" style="height:100%;font-family:Arial,Helvetica,Verdana"> <h3 align="center">State population thematic map </h3> <div id="demo" style="position:absolute; left:68%; top:44px; width:28%; height:100%"> <HR/> <p/> Choose Color Scheme: <select id="demo-htmlselect"> <option value="YlBl3"> YellowBlue3</option> <option value="YlBr3"> YellowBrown3</option> <option value="YlBl5"> YellowBlue5</option> <option value="YlBr5" selected="selected"> YellowBrown5</option> <option value="Blues5"> Blues</option> <option value="Greens5"> Greens</option> <option value="Greys5"> Greys</option> <option value="Oranges5"> Oranges</option> <option value="Purples5"> Purples</option> <option value="Reds5"> Reds</option> </select> <p/> </div> <div id="map" style="position:absolute; left:10px; top:50px; width:65%; height:75%; background-color:#778f99"></div> <div style="position:absolute;top:85%; left:10px;width:98%" class="noprint"> <HR/> <p> Note: This demo uses HTML5 Canvas and requires IE9+, Firefox 10+, or Chrome. No map will show up in IE8 or earlier. </p> </div> </body> </html>

    Read the article

  • Using R to Analyze G1GC Log Files

    - by user12620111
    Using R to Analyze G1GC Log Files body, td { font-family: sans-serif; background-color: white; font-size: 12px; margin: 8px; } tt, code, pre { font-family: 'DejaVu Sans Mono', 'Droid Sans Mono', 'Lucida Console', Consolas, Monaco, monospace; } h1 { font-size:2.2em; } h2 { font-size:1.8em; } h3 { font-size:1.4em; } h4 { font-size:1.0em; } h5 { font-size:0.9em; } h6 { font-size:0.8em; } a:visited { color: rgb(50%, 0%, 50%); } pre { margin-top: 0; max-width: 95%; border: 1px solid #ccc; white-space: pre-wrap; } pre code { display: block; padding: 0.5em; } code.r, code.cpp { background-color: #F8F8F8; } table, td, th { border: none; } blockquote { color:#666666; margin:0; padding-left: 1em; border-left: 0.5em #EEE solid; } hr { height: 0px; border-bottom: none; border-top-width: thin; border-top-style: dotted; border-top-color: #999999; } @media print { * { background: transparent !important; color: black !important; filter:none !important; -ms-filter: none !important; } body { font-size:12pt; max-width:100%; } a, a:visited { text-decoration: underline; } hr { visibility: hidden; page-break-before: always; } pre, blockquote { padding-right: 1em; page-break-inside: avoid; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page :left { margin: 15mm 20mm 15mm 10mm; } @page :right { margin: 15mm 10mm 15mm 20mm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } pre .operator, pre .paren { color: rgb(104, 118, 135) } pre .literal { color: rgb(88, 72, 246) } pre .number { color: rgb(0, 0, 205); } pre .comment { color: rgb(76, 136, 107); } pre .keyword { color: rgb(0, 0, 255); } pre .identifier { color: rgb(0, 0, 0); } pre .string { color: rgb(3, 106, 7); } var hljs=new function(){function m(p){return p.replace(/&/gm,"&").replace(/"}while(y.length||w.length){var v=u().splice(0,1)[0];z+=m(x.substr(q,v.offset-q));q=v.offset;if(v.event=="start"){z+=t(v.node);s.push(v.node)}else{if(v.event=="stop"){var p,r=s.length;do{r--;p=s[r];z+=("")}while(p!=v.node);s.splice(r,1);while(r'+M[0]+""}else{r+=M[0]}O=P.lR.lastIndex;M=P.lR.exec(L)}return r+L.substr(O,L.length-O)}function J(L,M){if(M.sL&&e[M.sL]){var r=d(M.sL,L);x+=r.keyword_count;return r.value}else{return F(L,M)}}function I(M,r){var L=M.cN?'':"";if(M.rB){y+=L;M.buffer=""}else{if(M.eB){y+=m(r)+L;M.buffer=""}else{y+=L;M.buffer=r}}D.push(M);A+=M.r}function G(N,M,Q){var R=D[D.length-1];if(Q){y+=J(R.buffer+N,R);return false}var P=q(M,R);if(P){y+=J(R.buffer+N,R);I(P,M);return P.rB}var L=v(D.length-1,M);if(L){var O=R.cN?"":"";if(R.rE){y+=J(R.buffer+N,R)+O}else{if(R.eE){y+=J(R.buffer+N,R)+O+m(M)}else{y+=J(R.buffer+N+M,R)+O}}while(L1){O=D[D.length-2].cN?"":"";y+=O;L--;D.length--}var r=D[D.length-1];D.length--;D[D.length-1].buffer="";if(r.starts){I(r.starts,"")}return R.rE}if(w(M,R)){throw"Illegal"}}var E=e[B];var D=[E.dM];var A=0;var x=0;var y="";try{var s,u=0;E.dM.buffer="";do{s=p(C,u);var t=G(s[0],s[1],s[2]);u+=s[0].length;if(!t){u+=s[1].length}}while(!s[2]);if(D.length1){throw"Illegal"}return{r:A,keyword_count:x,value:y}}catch(H){if(H=="Illegal"){return{r:0,keyword_count:0,value:m(C)}}else{throw H}}}function g(t){var p={keyword_count:0,r:0,value:m(t)};var r=p;for(var q in e){if(!e.hasOwnProperty(q)){continue}var s=d(q,t);s.language=q;if(s.keyword_count+s.rr.keyword_count+r.r){r=s}if(s.keyword_count+s.rp.keyword_count+p.r){r=p;p=s}}if(r.language){p.second_best=r}return p}function i(r,q,p){if(q){r=r.replace(/^((]+|\t)+)/gm,function(t,w,v,u){return w.replace(/\t/g,q)})}if(p){r=r.replace(/\n/g,"")}return r}function n(t,w,r){var x=h(t,r);var v=a(t);var y,s;if(v){y=d(v,x)}else{return}var q=c(t);if(q.length){s=document.createElement("pre");s.innerHTML=y.value;y.value=k(q,c(s),x)}y.value=i(y.value,w,r);var u=t.className;if(!u.match("(\\s|^)(language-)?"+v+"(\\s|$)")){u=u?(u+" "+v):v}if(/MSIE [678]/.test(navigator.userAgent)&&t.tagName=="CODE"&&t.parentNode.tagName=="PRE"){s=t.parentNode;var p=document.createElement("div");p.innerHTML=""+y.value+"";t=p.firstChild.firstChild;p.firstChild.cN=s.cN;s.parentNode.replaceChild(p.firstChild,s)}else{t.innerHTML=y.value}t.className=u;t.result={language:v,kw:y.keyword_count,re:y.r};if(y.second_best){t.second_best={language:y.second_best.language,kw:y.second_best.keyword_count,re:y.second_best.r}}}function o(){if(o.called){return}o.called=true;var r=document.getElementsByTagName("pre");for(var p=0;p|=||=||=|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~";this.ER="(?![\\s\\S])";this.BE={b:"\\\\.",r:0};this.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[this.BE],r:0};this.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[this.BE],r:0};this.CLCM={cN:"comment",b:"//",e:"$"};this.CBLCLM={cN:"comment",b:"/\\*",e:"\\*/"};this.HCM={cN:"comment",b:"#",e:"$"};this.NM={cN:"number",b:this.NR,r:0};this.CNM={cN:"number",b:this.CNR,r:0};this.BNM={cN:"number",b:this.BNR,r:0};this.inherit=function(r,s){var p={};for(var q in r){p[q]=r[q]}if(s){for(var q in s){p[q]=s[q]}}return p}}();hljs.LANGUAGES.cpp=function(){var a={keyword:{"false":1,"int":1,"float":1,"while":1,"private":1,"char":1,"catch":1,"export":1,virtual:1,operator:2,sizeof:2,dynamic_cast:2,typedef:2,const_cast:2,"const":1,struct:1,"for":1,static_cast:2,union:1,namespace:1,unsigned:1,"long":1,"throw":1,"volatile":2,"static":1,"protected":1,bool:1,template:1,mutable:1,"if":1,"public":1,friend:2,"do":1,"return":1,"goto":1,auto:1,"void":2,"enum":1,"else":1,"break":1,"new":1,extern:1,using:1,"true":1,"class":1,asm:1,"case":1,typeid:1,"short":1,reinterpret_cast:2,"default":1,"double":1,register:1,explicit:1,signed:1,typename:1,"try":1,"this":1,"switch":1,"continue":1,wchar_t:1,inline:1,"delete":1,alignof:1,char16_t:1,char32_t:1,constexpr:1,decltype:1,noexcept:1,nullptr:1,static_assert:1,thread_local:1,restrict:1,_Bool:1,complex:1},built_in:{std:1,string:1,cin:1,cout:1,cerr:1,clog:1,stringstream:1,istringstream:1,ostringstream:1,auto_ptr:1,deque:1,list:1,queue:1,stack:1,vector:1,map:1,set:1,bitset:1,multiset:1,multimap:1,unordered_set:1,unordered_map:1,unordered_multiset:1,unordered_multimap:1,array:1,shared_ptr:1}};return{dM:{k:a,i:"",k:a,r:10,c:["self"]}]}}}();hljs.LANGUAGES.r={dM:{c:[hljs.HCM,{cN:"number",b:"\\b0[xX][0-9a-fA-F]+[Li]?\\b",e:hljs.IMMEDIATE_RE,r:0},{cN:"number",b:"\\b\\d+(?:[eE][+\\-]?\\d*)?L\\b",e:hljs.IMMEDIATE_RE,r:0},{cN:"number",b:"\\b\\d+\\.(?!\\d)(?:i\\b)?",e:hljs.IMMEDIATE_RE,r:1},{cN:"number",b:"\\b\\d+(?:\\.\\d*)?(?:[eE][+\\-]?\\d*)?i?\\b",e:hljs.IMMEDIATE_RE,r:0},{cN:"number",b:"\\.\\d+(?:[eE][+\\-]?\\d*)?i?\\b",e:hljs.IMMEDIATE_RE,r:1},{cN:"keyword",b:"(?:tryCatch|library|setGeneric|setGroupGeneric)\\b",e:hljs.IMMEDIATE_RE,r:10},{cN:"keyword",b:"\\.\\.\\.",e:hljs.IMMEDIATE_RE,r:10},{cN:"keyword",b:"\\.\\.\\d+(?![\\w.])",e:hljs.IMMEDIATE_RE,r:10},{cN:"keyword",b:"\\b(?:function)",e:hljs.IMMEDIATE_RE,r:2},{cN:"keyword",b:"(?:if|in|break|next|repeat|else|for|return|switch|while|try|stop|warning|require|attach|detach|source|setMethod|setClass)\\b",e:hljs.IMMEDIATE_RE,r:1},{cN:"literal",b:"(?:NA|NA_integer_|NA_real_|NA_character_|NA_complex_)\\b",e:hljs.IMMEDIATE_RE,r:10},{cN:"literal",b:"(?:NULL|TRUE|FALSE|T|F|Inf|NaN)\\b",e:hljs.IMMEDIATE_RE,r:1},{cN:"identifier",b:"[a-zA-Z.][a-zA-Z0-9._]*\\b",e:hljs.IMMEDIATE_RE,r:0},{cN:"operator",b:"|=||   Using R to Analyze G1GC Log Files   Using R to Analyze G1GC Log Files Introduction Working in Oracle Platform Integration gives an engineer opportunities to work on a wide array of technologies. My team’s goal is to make Oracle applications run best on the Solaris/SPARC platform. When looking for bottlenecks in a modern applications, one needs to be aware of not only how the CPUs and operating system are executing, but also network, storage, and in some cases, the Java Virtual Machine. I was recently presented with about 1.5 GB of Java Garbage First Garbage Collector log file data. If you’re not familiar with the subject, you might want to review Garbage First Garbage Collector Tuning by Monica Beckwith. The customer had been running Java HotSpot 1.6.0_31 to host a web application server. I was told that the Solaris/SPARC server was running a Java process launched using a commmand line that included the following flags: -d64 -Xms9g -Xmx9g -XX:+UseG1GC -XX:MaxGCPauseMillis=200 -XX:InitiatingHeapOccupancyPercent=80 -XX:PermSize=256m -XX:MaxPermSize=256m -XX:+PrintGC -XX:+PrintGCTimeStamps -XX:+PrintHeapAtGC -XX:+PrintGCDateStamps -XX:+PrintFlagsFinal -XX:+DisableExplicitGC -XX:+UnlockExperimentalVMOptions -XX:ParallelGCThreads=8 Several sources on the internet indicate that if I were to print out the 1.5 GB of log files, it would require enough paper to fill the bed of a pick up truck. Of course, it would be fruitless to try to scan the log files by hand. Tools will be required to summarize the contents of the log files. Others have encountered large Java garbage collection log files. There are existing tools to analyze the log files: IBM’s GC toolkit The chewiebug GCViewer gchisto HPjmeter Instead of using one of the other tools listed, I decide to parse the log files with standard Unix tools, and analyze the data with R. Data Cleansing The log files arrived in two different formats. I guess that the difference is that one set of log files was generated using a more verbose option, maybe -XX:+PrintHeapAtGC, and the other set of log files was generated without that option. Format 1 In some of the log files, the log files with the less verbose format, a single trace, i.e. the report of a singe garbage collection event, looks like this: {Heap before GC invocations=12280 (full 61): garbage-first heap total 9437184K, used 7499918K [0xfffffffd00000000, 0xffffffff40000000, 0xffffffff40000000) region size 4096K, 1 young (4096K), 0 survivors (0K) compacting perm gen total 262144K, used 144077K [0xffffffff40000000, 0xffffffff50000000, 0xffffffff50000000) the space 262144K, 54% used [0xffffffff40000000, 0xffffffff48cb3758, 0xffffffff48cb3800, 0xffffffff50000000) No shared spaces configured. 2014-05-14T07:24:00.988-0700: 60586.353: [GC pause (young) 7324M->7320M(9216M), 0.1567265 secs] Heap after GC invocations=12281 (full 61): garbage-first heap total 9437184K, used 7496533K [0xfffffffd00000000, 0xffffffff40000000, 0xffffffff40000000) region size 4096K, 0 young (0K), 0 survivors (0K) compacting perm gen total 262144K, used 144077K [0xffffffff40000000, 0xffffffff50000000, 0xffffffff50000000) the space 262144K, 54% used [0xffffffff40000000, 0xffffffff48cb3758, 0xffffffff48cb3800, 0xffffffff50000000) No shared spaces configured. } A simple grep can be used to extract a summary: $ grep "\[ GC pause (young" g1gc.log 2014-05-13T13:24:35.091-0700: 3.109: [GC pause (young) 20M->5029K(9216M), 0.0146328 secs] 2014-05-13T13:24:35.440-0700: 3.459: [GC pause (young) 9125K->6077K(9216M), 0.0086723 secs] 2014-05-13T13:24:37.581-0700: 5.599: [GC pause (young) 25M->8470K(9216M), 0.0203820 secs] 2014-05-13T13:24:42.686-0700: 10.704: [GC pause (young) 44M->15M(9216M), 0.0288848 secs] 2014-05-13T13:24:48.941-0700: 16.958: [GC pause (young) 51M->20M(9216M), 0.0491244 secs] 2014-05-13T13:24:56.049-0700: 24.066: [GC pause (young) 92M->26M(9216M), 0.0525368 secs] 2014-05-13T13:25:34.368-0700: 62.383: [GC pause (young) 602M->68M(9216M), 0.1721173 secs] But that format wasn't easily read into R, so I needed to be a bit more tricky. I used the following Unix command to create a summary file that was easy for R to read. $ echo "SecondsSinceLaunch BeforeSize AfterSize TotalSize RealTime" $ grep "\[GC pause (young" g1gc.log | grep -v mark | sed -e 's/[A-SU-z\(\),]/ /g' -e 's/->/ /' -e 's/: / /g' | more SecondsSinceLaunch BeforeSize AfterSize TotalSize RealTime 2014-05-13T13:24:35.091-0700 3.109 20 5029 9216 0.0146328 2014-05-13T13:24:35.440-0700 3.459 9125 6077 9216 0.0086723 2014-05-13T13:24:37.581-0700 5.599 25 8470 9216 0.0203820 2014-05-13T13:24:42.686-0700 10.704 44 15 9216 0.0288848 2014-05-13T13:24:48.941-0700 16.958 51 20 9216 0.0491244 2014-05-13T13:24:56.049-0700 24.066 92 26 9216 0.0525368 2014-05-13T13:25:34.368-0700 62.383 602 68 9216 0.1721173 Format 2 In some of the log files, the log files with the more verbose format, a single trace, i.e. the report of a singe garbage collection event, was more complicated than Format 1. Here is a text file with an example of a single G1GC trace in the second format. As you can see, it is quite complicated. It is nice that there is so much information available, but the level of detail can be overwhelming. I wrote this awk script (download) to summarize each trace on a single line. #!/usr/bin/env awk -f BEGIN { printf("SecondsSinceLaunch IncrementalCount FullCount UserTime SysTime RealTime BeforeSize AfterSize TotalSize\n") } ###################### # Save count data from lines that are at the start of each G1GC trace. # Each trace starts out like this: # {Heap before GC invocations=14 (full 0): # garbage-first heap total 9437184K, used 325496K [0xfffffffd00000000, 0xffffffff40000000, 0xffffffff40000000) ###################### /{Heap.*full/{ gsub ( "\\)" , "" ); nf=split($0,a,"="); split(a[2],b," "); getline; if ( match($0, "first") ) { G1GC=1; IncrementalCount=b[1]; FullCount=substr( b[3], 1, length(b[3])-1 ); } else { G1GC=0; } } ###################### # Pull out time stamps that are in lines with this format: # 2014-05-12T14:02:06.025-0700: 94.312: [GC pause (young), 0.08870154 secs] ###################### /GC pause/ { DateTime=$1; SecondsSinceLaunch=substr($2, 1, length($2)-1); } ###################### # Heap sizes are in lines that look like this: # [ 4842M->4838M(9216M)] ###################### /\[ .*]$/ { gsub ( "\\[" , "" ); gsub ( "\ \]" , "" ); gsub ( "->" , " " ); gsub ( "\\( " , " " ); gsub ( "\ \)" , " " ); split($0,a," "); if ( split(a[1],b,"M") > 1 ) {BeforeSize=b[1]*1024;} if ( split(a[1],b,"K") > 1 ) {BeforeSize=b[1];} if ( split(a[2],b,"M") > 1 ) {AfterSize=b[1]*1024;} if ( split(a[2],b,"K") > 1 ) {AfterSize=b[1];} if ( split(a[3],b,"M") > 1 ) {TotalSize=b[1]*1024;} if ( split(a[3],b,"K") > 1 ) {TotalSize=b[1];} } ###################### # Emit an output line when you find input that looks like this: # [Times: user=1.41 sys=0.08, real=0.24 secs] ###################### /\[Times/ { if (G1GC==1) { gsub ( "," , "" ); split($2,a,"="); UserTime=a[2]; split($3,a,"="); SysTime=a[2]; split($4,a,"="); RealTime=a[2]; print DateTime,SecondsSinceLaunch,IncrementalCount,FullCount,UserTime,SysTime,RealTime,BeforeSize,AfterSize,TotalSize; G1GC=0; } } The resulting summary is about 25X smaller that the original file, but still difficult for a human to digest. SecondsSinceLaunch IncrementalCount FullCount UserTime SysTime RealTime BeforeSize AfterSize TotalSize ... 2014-05-12T18:36:34.669-0700: 3985.744 561 0 0.57 0.06 0.16 1724416 1720320 9437184 2014-05-12T18:36:34.839-0700: 3985.914 562 0 0.51 0.06 0.19 1724416 1720320 9437184 2014-05-12T18:36:35.069-0700: 3986.144 563 0 0.60 0.04 0.27 1724416 1721344 9437184 2014-05-12T18:36:35.354-0700: 3986.429 564 0 0.33 0.04 0.09 1725440 1722368 9437184 2014-05-12T18:36:35.545-0700: 3986.620 565 0 0.58 0.04 0.17 1726464 1722368 9437184 2014-05-12T18:36:35.726-0700: 3986.801 566 0 0.43 0.05 0.12 1726464 1722368 9437184 2014-05-12T18:36:35.856-0700: 3986.930 567 0 0.30 0.04 0.07 1726464 1723392 9437184 2014-05-12T18:36:35.947-0700: 3987.023 568 0 0.61 0.04 0.26 1727488 1723392 9437184 2014-05-12T18:36:36.228-0700: 3987.302 569 0 0.46 0.04 0.16 1731584 1724416 9437184 Reading the Data into R Once the GC log data had been cleansed, either by processing the first format with the shell script, or by processing the second format with the awk script, it was easy to read the data into R. g1gc.df = read.csv("summary.txt", row.names = NULL, stringsAsFactors=FALSE,sep="") str(g1gc.df) ## 'data.frame': 8307 obs. of 10 variables: ## $ row.names : chr "2014-05-12T14:00:32.868-0700:" "2014-05-12T14:00:33.179-0700:" "2014-05-12T14:00:33.677-0700:" "2014-05-12T14:00:35.538-0700:" ... ## $ SecondsSinceLaunch: num 1.16 1.47 1.97 3.83 6.1 ... ## $ IncrementalCount : int 0 1 2 3 4 5 6 7 8 9 ... ## $ FullCount : int 0 0 0 0 0 0 0 0 0 0 ... ## $ UserTime : num 0.11 0.05 0.04 0.21 0.08 0.26 0.31 0.33 0.34 0.56 ... ## $ SysTime : num 0.04 0.01 0.01 0.05 0.01 0.06 0.07 0.06 0.07 0.09 ... ## $ RealTime : num 0.02 0.02 0.01 0.04 0.02 0.04 0.05 0.04 0.04 0.06 ... ## $ BeforeSize : int 8192 5496 5768 22528 24576 43008 34816 53248 55296 93184 ... ## $ AfterSize : int 1400 1672 2557 4907 7072 14336 16384 18432 19456 21504 ... ## $ TotalSize : int 9437184 9437184 9437184 9437184 9437184 9437184 9437184 9437184 9437184 9437184 ... head(g1gc.df) ## row.names SecondsSinceLaunch IncrementalCount ## 1 2014-05-12T14:00:32.868-0700: 1.161 0 ## 2 2014-05-12T14:00:33.179-0700: 1.472 1 ## 3 2014-05-12T14:00:33.677-0700: 1.969 2 ## 4 2014-05-12T14:00:35.538-0700: 3.830 3 ## 5 2014-05-12T14:00:37.811-0700: 6.103 4 ## 6 2014-05-12T14:00:41.428-0700: 9.720 5 ## FullCount UserTime SysTime RealTime BeforeSize AfterSize TotalSize ## 1 0 0.11 0.04 0.02 8192 1400 9437184 ## 2 0 0.05 0.01 0.02 5496 1672 9437184 ## 3 0 0.04 0.01 0.01 5768 2557 9437184 ## 4 0 0.21 0.05 0.04 22528 4907 9437184 ## 5 0 0.08 0.01 0.02 24576 7072 9437184 ## 6 0 0.26 0.06 0.04 43008 14336 9437184 Basic Statistics Once the data has been read into R, simple statistics are very easy to generate. All of the numbers from high school statistics are available via simple commands. For example, generate a summary of every column: summary(g1gc.df) ## row.names SecondsSinceLaunch IncrementalCount FullCount ## Length:8307 Min. : 1 Min. : 0 Min. : 0.0 ## Class :character 1st Qu.: 9977 1st Qu.:2048 1st Qu.: 0.0 ## Mode :character Median :12855 Median :4136 Median : 12.0 ## Mean :12527 Mean :4156 Mean : 31.6 ## 3rd Qu.:15758 3rd Qu.:6262 3rd Qu.: 61.0 ## Max. :55484 Max. :8391 Max. :113.0 ## UserTime SysTime RealTime BeforeSize ## Min. :0.040 Min. :0.0000 Min. : 0.0 Min. : 5476 ## 1st Qu.:0.470 1st Qu.:0.0300 1st Qu.: 0.1 1st Qu.:5137920 ## Median :0.620 Median :0.0300 Median : 0.1 Median :6574080 ## Mean :0.751 Mean :0.0355 Mean : 0.3 Mean :5841855 ## 3rd Qu.:0.920 3rd Qu.:0.0400 3rd Qu.: 0.2 3rd Qu.:7084032 ## Max. :3.370 Max. :1.5600 Max. :488.1 Max. :8696832 ## AfterSize TotalSize ## Min. : 1380 Min. :9437184 ## 1st Qu.:5002752 1st Qu.:9437184 ## Median :6559744 Median :9437184 ## Mean :5785454 Mean :9437184 ## 3rd Qu.:7054336 3rd Qu.:9437184 ## Max. :8482816 Max. :9437184 Q: What is the total amount of User CPU time spent in garbage collection? sum(g1gc.df$UserTime) ## [1] 6236 As you can see, less than two hours of CPU time was spent in garbage collection. Is that too much? To find the percentage of time spent in garbage collection, divide the number above by total_elapsed_time*CPU_count. In this case, there are a lot of CPU’s and it turns out the the overall amount of CPU time spent in garbage collection isn’t a problem when viewed in isolation. When calculating rates, i.e. events per unit time, you need to ask yourself if the rate is homogenous across the time period in the log file. Does the log file include spikes of high activity that should be separately analyzed? Averaging in data from nights and weekends with data from business hours may alias problems. If you have a reason to suspect that the garbage collection rates include peaks and valleys that need independent analysis, see the “Time Series” section, below. Q: How much garbage is collected on each pass? The amount of heap space that is recovered per GC pass is surprisingly low: At least one collection didn’t recover any data. (“Min.=0”) 25% of the passes recovered 3MB or less. (“1st Qu.=3072”) Half of the GC passes recovered 4MB or less. (“Median=4096”) The average amount recovered was 56MB. (“Mean=56390”) 75% of the passes recovered 36MB or less. (“3rd Qu.=36860”) At least one pass recovered 2GB. (“Max.=2121000”) g1gc.df$Delta = g1gc.df$BeforeSize - g1gc.df$AfterSize summary(g1gc.df$Delta) ## Min. 1st Qu. Median Mean 3rd Qu. Max. ## 0 3070 4100 56400 36900 2120000 Q: What is the maximum User CPU time for a single collection? The worst garbage collection (“Max.”) is many standard deviations away from the mean. The data appears to be right skewed. summary(g1gc.df$UserTime) ## Min. 1st Qu. Median Mean 3rd Qu. Max. ## 0.040 0.470 0.620 0.751 0.920 3.370 sd(g1gc.df$UserTime) ## [1] 0.3966 Basic Graphics Once the data is in R, it is trivial to plot the data with formats including dot plots, line charts, bar charts (simple, stacked, grouped), pie charts, boxplots, scatter plots histograms, and kernel density plots. Histogram of User CPU Time per Collection I don't think that this graph requires any explanation. hist(g1gc.df$UserTime, main="User CPU Time per Collection", xlab="Seconds", ylab="Frequency") Box plot to identify outliers When the initial data is viewed with a box plot, you can see the one crazy outlier in the real time per GC. Save this data point for future analysis and drop the outlier so that it’s not throwing off our statistics. Now the box plot shows many outliers, which will be examined later, using times series analysis. Notice that the scale of the x-axis changes drastically once the crazy outlier is removed. par(mfrow=c(2,1)) boxplot(g1gc.df$UserTime,g1gc.df$SysTime,g1gc.df$RealTime, main="Box Plot of Time per GC\n(dominated by a crazy outlier)", names=c("usr","sys","elapsed"), xlab="Seconds per GC", ylab="Time (Seconds)", horizontal = TRUE, outcol="red") crazy.outlier.df=g1gc.df[g1gc.df$RealTime > 400,] g1gc.df=g1gc.df[g1gc.df$RealTime < 400,] boxplot(g1gc.df$UserTime,g1gc.df$SysTime,g1gc.df$RealTime, main="Box Plot of Time per GC\n(crazy outlier excluded)", names=c("usr","sys","elapsed"), xlab="Seconds per GC", ylab="Time (Seconds)", horizontal = TRUE, outcol="red") box(which = "outer", lty = "solid") Here is the crazy outlier for future analysis: crazy.outlier.df ## row.names SecondsSinceLaunch IncrementalCount ## 8233 2014-05-12T23:15:43.903-0700: 20741 8316 ## FullCount UserTime SysTime RealTime BeforeSize AfterSize TotalSize ## 8233 112 0.55 0.42 488.1 8381440 8235008 9437184 ## Delta ## 8233 146432 R Time Series Data To analyze the garbage collection as a time series, I’ll use Z’s Ordered Observations (zoo). “zoo is the creator for an S3 class of indexed totally ordered observations which includes irregular time series.” require(zoo) ## Loading required package: zoo ## ## Attaching package: 'zoo' ## ## The following objects are masked from 'package:base': ## ## as.Date, as.Date.numeric head(g1gc.df[,1]) ## [1] "2014-05-12T14:00:32.868-0700:" "2014-05-12T14:00:33.179-0700:" ## [3] "2014-05-12T14:00:33.677-0700:" "2014-05-12T14:00:35.538-0700:" ## [5] "2014-05-12T14:00:37.811-0700:" "2014-05-12T14:00:41.428-0700:" options("digits.secs"=3) times=as.POSIXct( g1gc.df[,1], format="%Y-%m-%dT%H:%M:%OS%z:") g1gc.z = zoo(g1gc.df[,-c(1)], order.by=times) head(g1gc.z) ## SecondsSinceLaunch IncrementalCount FullCount ## 2014-05-12 17:00:32.868 1.161 0 0 ## 2014-05-12 17:00:33.178 1.472 1 0 ## 2014-05-12 17:00:33.677 1.969 2 0 ## 2014-05-12 17:00:35.538 3.830 3 0 ## 2014-05-12 17:00:37.811 6.103 4 0 ## 2014-05-12 17:00:41.427 9.720 5 0 ## UserTime SysTime RealTime BeforeSize AfterSize ## 2014-05-12 17:00:32.868 0.11 0.04 0.02 8192 1400 ## 2014-05-12 17:00:33.178 0.05 0.01 0.02 5496 1672 ## 2014-05-12 17:00:33.677 0.04 0.01 0.01 5768 2557 ## 2014-05-12 17:00:35.538 0.21 0.05 0.04 22528 4907 ## 2014-05-12 17:00:37.811 0.08 0.01 0.02 24576 7072 ## 2014-05-12 17:00:41.427 0.26 0.06 0.04 43008 14336 ## TotalSize Delta ## 2014-05-12 17:00:32.868 9437184 6792 ## 2014-05-12 17:00:33.178 9437184 3824 ## 2014-05-12 17:00:33.677 9437184 3211 ## 2014-05-12 17:00:35.538 9437184 17621 ## 2014-05-12 17:00:37.811 9437184 17504 ## 2014-05-12 17:00:41.427 9437184 28672 Example of Two Benchmark Runs in One Log File The data in the following graph is from a different log file, not the one of primary interest to this article. I’m including this image because it is an example of idle periods followed by busy periods. It would be uninteresting to average the rate of garbage collection over the entire log file period. More interesting would be the rate of garbage collect in the two busy periods. Are they the same or different? Your production data may be similar, for example, bursts when employees return from lunch and idle times on weekend evenings, etc. Once the data is in an R Time Series, you can analyze isolated time windows. Clipping the Time Series data Flashing back to our test case… Viewing the data as a time series is interesting. You can see that the work intensive time period is between 9:00 PM and 3:00 AM. Lets clip the data to the interesting period:     par(mfrow=c(2,1)) plot(g1gc.z$UserTime, type="h", main="User Time per GC\nTime: Complete Log File", xlab="Time of Day", ylab="CPU Seconds per GC", col="#1b9e77") clipped.g1gc.z=window(g1gc.z, start=as.POSIXct("2014-05-12 21:00:00"), end=as.POSIXct("2014-05-13 03:00:00")) plot(clipped.g1gc.z$UserTime, type="h", main="User Time per GC\nTime: Limited to Benchmark Execution", xlab="Time of Day", ylab="CPU Seconds per GC", col="#1b9e77") box(which = "outer", lty = "solid") Cumulative Incremental and Full GC count Here is the cumulative incremental and full GC count. When the line is very steep, it indicates that the GCs are repeating very quickly. Notice that the scale on the Y axis is different for full vs. incremental. plot(clipped.g1gc.z[,c(2:3)], main="Cumulative Incremental and Full GC count", xlab="Time of Day", col="#1b9e77") GC Analysis of Benchmark Execution using Time Series data In the following series of 3 graphs: The “After Size” show the amount of heap space in use after each garbage collection. Many Java objects are still referenced, i.e. alive, during each garbage collection. This may indicate that the application has a memory leak, or may indicate that the application has a very large memory footprint. Typically, an application's memory footprint plateau's in the early stage of execution. One would expect this graph to have a flat top. The steep decline in the heap space may indicate that the application crashed after 2:00. The second graph shows that the outliers in real execution time, discussed above, occur near 2:00. when the Java heap seems to be quite full. The third graph shows that Full GCs are infrequent during the first few hours of execution. The rate of Full GC's, (the slope of the cummulative Full GC line), changes near midnight.   plot(clipped.g1gc.z[,c("AfterSize","RealTime","FullCount")], xlab="Time of Day", col=c("#1b9e77","red","#1b9e77")) GC Analysis of heap recovered Each GC trace includes the amount of heap space in use before and after the individual GC event. During garbage coolection, unreferenced objects are identified, the space holding the unreferenced objects is freed, and thus, the difference in before and after usage indicates how much space has been freed. The following box plot and bar chart both demonstrate the same point - the amount of heap space freed per garbage colloection is surprisingly low. par(mfrow=c(2,1)) boxplot(as.vector(clipped.g1gc.z$Delta), main="Amount of Heap Recovered per GC Pass", xlab="Size in KB", horizontal = TRUE, col="red") hist(as.vector(clipped.g1gc.z$Delta), main="Amount of Heap Recovered per GC Pass", xlab="Size in KB", breaks=100, col="red") box(which = "outer", lty = "solid") This graph is the most interesting. The dark blue area shows how much heap is occupied by referenced Java objects. This represents memory that holds live data. The red fringe at the top shows how much data was recovered after each garbage collection. barplot(clipped.g1gc.z[,c("AfterSize","Delta")], col=c("#7570b3","#e7298a"), xlab="Time of Day", border=NA) legend("topleft", c("Live Objects","Heap Recovered on GC"), fill=c("#7570b3","#e7298a")) box(which = "outer", lty = "solid") When I discuss the data in the log files with the customer, I will ask for an explaination for the large amount of referenced data resident in the Java heap. There are two are posibilities: There is a memory leak and the amount of space required to hold referenced objects will continue to grow, limited only by the maximum heap size. After the maximum heap size is reached, the JVM will throw an “Out of Memory” exception every time that the application tries to allocate a new object. If this is the case, the aplication needs to be debugged to identify why old objects are referenced when they are no longer needed. The application has a legitimate requirement to keep a large amount of data in memory. The customer may want to further increase the maximum heap size. Another possible solution would be to partition the application across multiple cluster nodes, where each node has responsibility for managing a unique subset of the data. Conclusion In conclusion, R is a very powerful tool for the analysis of Java garbage collection log files. The primary difficulty is data cleansing so that information can be read into an R data frame. Once the data has been read into R, a rich set of tools may be used for thorough evaluation.

    Read the article

< Previous Page | 723 724 725 726 727 728 729 730 731 732 733 734  | Next Page >