(495) 925-0049, ITShop - 229-0436, 925-0049
 

 
 
 
 
 

-,

:

ASP.NET MVC 3, Windows Phone

:

  • ;
  • -;
  • jQuery Mobile;
  • ;
  • Windows Phone, Android iOS;
  • (graceful degradation).

code.msdn.microsoft.com/mag201203MobileWeb.

, API, . ? Apple iOS (iPhone iPad) Objective C, Google Android - Java, Windows Phone - Silverlight, API . , 50% ( ) - . , , , , .

: - - . . - HTML JavaScript - , , GPS .

, , , : ? , , , - (native application shell).

-, , . "-" (Web browser control), URL . ( UI-, "-".) "-" URL. URL, , . , "-" -.

, , , - EffectiveUI - . , , , . , , - . . 1.

The Completed Application Main Menu
. 1.

-

, (Steve Sanderson) "Build a Better Mobile Browsing Experience" (msdn.microsoft.com/magazine/hh288079) "MSDN Magazine" 2011 . .

  • UI- . , . , .

-, , .

  • , . , . , , , , .
  • HTML5 CSS3 - - - , HTML5 CSS3. . , , .

. , , , , . ASP.NET MVC 3 , , . , , . . 2 , , .

. 2. , ,

  1. privateActionResultSelectView(stringviewName,objectmodel,
  2. stringoutputType="html")
  3. {
  4. if(outputType.ToLower()=="json")
  5. {
  6. returnJson(model,JsonRequestBehavior.AllowGet);
  7. }
  8. else
  9. {
  10. #ifMOBILE
  11. returnView(viewName+"Mobile",model);
  12. #else
  13. if(Request.Browser.IsMobileDevice)
  14. {
  15. returnView(viewName+"Mobile",model);
  16. }
  17. else
  18. {
  19. returnView(viewName,model);
  20. }
  21. #endif
  22. }
  23. }

, . , JSON HTML, , outputType. MOBILE, . "Mobile" ASP.NET MVC 3, Request.Browser.IsMobileDevice , .

, (master pages) . - . CSS- , jQuery Mobile Framework.

GPS- API , W3C- HTML5. API, (Brandon Satrom) "Integrating Geolocation into Web Applications" (msdn.microsoft.com/magazine/hh580735) 2011 . - JavaScript HTML5 , HTML5 API , API, - . -, , . Android , enableHighAccuracy true API GPS Android, .3.

. 3. HTML5

  1. if(navigator.geolocation){
  2. navigator.geolocation.getCurrentPosition(function(position){
  3. $("#map_canvas").GoogleMap("addMarker",{
  4. id:"device_location",
  5. latitude:position.coords.latitude,
  6. longitude:position.coords.longitude,
  7. description:"CurrentLocation",
  8. iconImageUrl:'@Url.Content("~/Content/images/my-location-dot.png")',
  9. callback:function(){
  10. $("#map_canvas").GoogleMap("panToLocation",{
  11. latitude:position.coords.latitude,
  12. longitude:position.coords.longitude
  13. });
  14. }
  15. });
  16. },function(error){
  17. },{
  18. enableHighAccuracy:true
  19. });
  20. }

jQuery Mobile

jQuery Mobile Framework - " UI HTML5 ", - (jquerymobile.com). , , -, . jQuery Mobile ASP.NET MVC 3 NuGet, NuGet Package Manager, Package Manager Console, "Install-Package jquery.mobile" ( ). jQuery Mobile JavaScript CSS. jQuery Mobile JavaScript CSS , .4.

. 4.

  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. <title>@ViewBag.Title</title>
  5. <metaname="viewport"content
  6. ="width=device-width,
  7. initial-scale=1.0,user-scalable=no,height=device-height"/>
  8. <metahttp-equiv="Content-type"content="text/html;charset=utf-8">
  9. <linkhref="@Url.Content("~/Content/eui_assets/css/reset.css")"
  10. rel="stylesheet"type="text/css"/>
  11. <linkhref="@Url.Content("~/Content/jquery.mobile-1.0.min.css")"
  12. rel="stylesheet"type="text/css"/>
  13. <linkhref="@Url.Content("~/Content/mobile.css")"
  14. rel="stylesheet"type="text/css"/>
  15. <scriptsrc="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"
  16. type="text/javascript"></script>
  17. @RenderSection("PreJQueryMobileInit",false)
  18. <scriptsrc="@Url.Content("~/Scripts/jquery.mobile-1.0.min.js")"
  19. type="text/javascript"></script>
  20. <scripttype="text/javascript">
  21. $('a[data-ajax="false"]').live('click',function(event){
  22. if(!$(this).hasClass("camera-link")){
  23. $.mobile.showPageLoadingMsg();
  24. }
  25. });
  26. </script>
  27. @RenderSection("Head",false)
  28. </head>
  29. <bodyclass="eui_body"id="@ViewBag.BodyID">
  30. @RenderBody()
  31. </body>
  32. </html>

jQuery Mobile , jQuery. jQuery Mobile:

, jQuery, - $(document).ready(), , DOM. jQueryMobile DOM [AJAX], DOM (readyhandler) . , , pageinit.

pageinit , Google Maps, , AJAX.

- @RenderSection("PreJQueryMobileInit", false), . 4, jQuery Mobile . - mobileinit, listview jQuery Mobile. jQuery Mobile, filterCompleteCallback listview (built-in list filtering). , . jQuery Mobile listview jQuery Mobile ; mobileinit, . 5.

. 5. mobileinit

  1. if(navigator.geolocation){
  2. navigator.geolocation.getCurrentPosition(function(position){
  3. $("#map_canvas").GoogleMap("addMarker",{
  4. id:"device_location",
  5. latitude:position.coords.latitude,
  6. longitude:position.coords.longitude,
  7. description:"CurrentLocation",
  8. iconImageUrl:'@Url.Content("~/Content/images/my-location-dot.png")',
  9. callback:function(){
  10. $("#map_canvas").GoogleMap("panToLocation",{
  11. latitude:position.coords.latitude,
  12. longitude:position.coords.longitude
  13. });
  14. }
  15. });
  16. },function(error){
  17. },{
  18. enableHighAccuracy:true
  19. });
  20. }
  21. @sectionPreJQueryMobileInit{
  22. <scripttype="text/javascript">
  23. $(document).bind("mobileinit",function(){
  24. $.mobile.listview.prototype.options.filterCompleteCallback=function(){
  25. //Notethatfiltercompletecallbackisacustom
  26. //additiontojQueryMobileandwouldneedtobeupdated
  27. //infuturerevisions.
  28. //Seecommentsinjquery.mobile-1.0.jswithSSC09/12/2011
  29. varids=[];
  30. var$visibleItems=$("#js-work-orders-list").find(
  31. "li:not(.ui-screen-hidden");
  32. for(vari=0;i<$visibleItems.length;i++){
  33. varitem=$($visibleItems[i]).find("p");
  34. ids.push(item.text().substr(item.text().indexOf('#')+1));
  35. }
  36. ids.push("device_location");
  37. $("#map_canvas").GoogleMap("hideAllMarkersExceptList",ids);
  38. }
  39. });
  40. </script>
  41. }

jQuery Mobile HTML5, header footer data-*. data-role , . , MapMobile.cshtml . 6 div, data-role="page".

. 6. MapMobile.cshtml

  1. <divdata-role="page"id="map_page"data-fullscreen="true"
  2. data-url="map_page"data-theme="a">
  3. <headerdata-role="header"data-position="fixed">
  4. <ahref="@Url.Action("Index","Home")"data-icon="home"
  5. data-direction="reverse">Home</a>
  6. <h1>MapDemo</h1>
  7. <ahref="#"data-icon="back"id="js-exit-street-view"
  8. class="ui-btn-hidden">ExitStreetView</a>
  9. </header>
  10. <divdata-role="content"class="main-content">
  11. <divid="map_canvas"style="width:100%;height:100%"></div>
  12. </div>
  13. <footerdata-role="footer"data-position="fixed"
  14. data-id="fixed-nav"data-theme="a">
  15. <navdata-role="navbar">
  16. <ul>
  17. <li><ahref="#map_page"class
  18. ="ui-btn-active
  19. ui-state-persist">Map</a></li>
  20. <li><ahref="#items_page">WorkOrders</a></li>
  21. </ul>
  22. </nav>
  23. </footer>
  24. </div>
  25. <divdata-role="page"id="items_page"data-url="items_page"data-theme="a">
  26. <headerdata-role="header"data-position="fixed">
  27. <ahref="@Url.Action("Index","Home")"data-icon="home"
  28. data-direction="reverse">Home</a>
  29. <h1>MapDemo</h1>
  30. </header>
  31. <divdata-role="content"class="main-content">
  32. <divclass="list-container">
  33. <uldata-role="listview"id="js-work-orders-list"data-filter="true">
  34. @foreach(MapItemiteminModel.Items)
  35. {
  36. <liclass="work-order-id-@item.ID">
  37. <ahref="@Url.Action("Details","Home",new{id=item.ID})"
  38. data-ajax="false">
  39. <h3>@item.Issue</h3>
  40. <p>WorkOrder#@item.ID</p>
  41. </a>
  42. </li>
  43. }
  44. </ul>
  45. </div>
  46. </div>
  47. <footerdata-role="footer"data-position="fixed"
  48. data-id="fixed-nav"data-theme="a">
  49. <navdata-role="navbar">
  50. <ul>
  51. <li><ahref="#map_page"data-direction="reverse">Map</a></li>
  52. <li><ahref="#items_page"class
  53. ="ui-btn-active
  54. ui-state-persist">WorkOrders</a></li>
  55. </ul>
  56. </nav>
  57. </footer>
  58. </div>

jQuery Mobile, div AJAX , . , . 7. , data-* jQuery Mobile, - jQuery Mobile.

Transitioning Between Pages Via AJAX
. 7. AJAX

, "-". , , , URL URL, ("") . - . URL "Home/Image", . Work Order, , . 8. .

Invoking Native Camera Functionality
. 8.

Windows Phone

Windows Phone Silverlight. Windows Phone -, ASP.NET. XAML- :

<Canvas x:Name="LayoutRoot" Background="Black" Margin="0">
 <phone:WebBrowser HorizontalAlignment="Left" Name="webBrowser1"
 Navigating="webBrowser1_Navigating" IsScriptEnabled="True"
 IsGeolocationEnabled="True"
 Background="Black" Height="720" Width="480" />
</Canvas>

, IsScriptEnabled true, "-" Windows Phone ; , Navigating.

MainPage.xaml.cs, . 9, webBrowser1_Navigating. URL URL, , , CameraCaptureTask -. ,
photoCaptureOrSelectionCompleted. -, POST HTTP-, -, , . upload_FormUploadCompleted, -.

. 9. MainPage.xaml.cs Windows Phone

  1. publicpartialclassMainPage:PhoneApplicationPage
  2. {
  3. CameraCaptureTaskcameraCaptureTask;
  4. BitmapImagebmp;
  5. stringid="";
  6. stringbaseURL="http://...";
  7. //Constructor
  8. publicMainPage()
  9. {
  10. InitializeComponent();
  11. cameraCaptureTask=newCameraCaptureTask();
  12. cameraCaptureTask.Completed+=
  13. newEventHandler<PhotoResult>(photoCaptureOrSelectionCompleted);
  14. }
  15. privatevoidwebBrowser1_Navigating(objectsender,NavigatingEventArgse)
  16. {
  17. //CatchNavigationandlaunchlocalcamera
  18. if(e.Uri.AbsoluteUri.ToLower().Contains("home/image"))
  19. {
  20. id=e.Uri.AbsoluteUri.Substring(e.Uri.AbsoluteUri.LastIndexOf("/")+1);
  21. cameraCaptureTask.Show();
  22. e.Cancel=true;
  23. }
  24. }
  25. voidphotoCaptureOrSelectionCompleted(objectsender,PhotoResulte)
  26. {
  27. if(e.TaskResult==TaskResult.OK)
  28. {
  29. byte[]data=newbyte[e.ChosenPhoto.Length];
  30. e.ChosenPhoto.Read(data,0,data.Length);
  31. e.ChosenPhoto.Close();
  32. GuidfileId=Guid.NewGuid();
  33. Dictionary<string,object>postParameters=newDictionary<string,object>();
  34. postParameters.Add("photo",newFormUpload.FileParameter(
  35. data,fileId.ToString()+
  36. ".jpg","image/jpeg"));
  37. FormUploadupload=
  38. newFormUpload(baseURL+"Home/UploadPicture/"+id,postParameters);
  39. upload.FormUploadCompleted+=
  40. newFormUpload.FormUploadCompletedHandler(upload_FormUploadCompleted);
  41. upload.BeginMultipartFormDataPost();
  42. }
  43. }
  44. voidupload_FormUploadCompleted(objectsource)
  45. {
  46. webBrowser1.Navigate(webBrowser1.Source);
  47. }
  48. privatevoidPhoneApplicationPage_Loaded(objectsender,RoutedEventArgse)
  49. {
  50. webBrowser1.Navigate(newUri(baseURL));
  51. }
  52. }

Windows Phone - Google Maps Bing Maps Android iOS. - , Internet Explorer 9 , JavaScript, - - , . , , Bing Maps Windows Phone, , - , .

Android

Java- Android , (Sean Christmann), Windows Phone. XML- WebView Android:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 >
 <WebView android:id="@+id/webView"
 android:layout_width="match_parent"
 android:layout_height="match_parent"></WebView>
</LinearLayout>

EffectiveUIActivity.java, . 10, onCreate WebViewClient onLoadResource shouldOverrideUrlLoading WebView, , Windows Phone, , , . onGeolocationPermissionsShowPrompt, , , WebView GPS. onActivityResult -, , Windows Phone, -.

. 10. EffectiveUIActivity.java Android

  1. publicclassEffectiveUIActivityextendsActivity{
  2. /**Calledwhentheactivityisfirstcreated.*/
  3. WebViewwebView;
  4. StringcameraId;
  5. staticStringbaseURL="http://...";
  6. @Override
  7. publicvoidonCreate(BundlesavedInstanceState){
  8. super.onCreate(savedInstanceState);
  9. setContentView(R.layout.main);
  10. webView=(WebView)findViewById(R.id.webView);
  11. webView.getSettings().setJavaScriptEnabled(true);
  12. webView.getSettings().setGeolocationEnabled(true);
  13. webView.setVerticalScrollbarOverlay(true);
  14. webView.loadUrl(baseURL);
  15. finalEffectiveUIActivityactivity=this;
  16. webView.setWebViewClient(newWebViewClient(){
  17. @Override
  18. publicvoidonLoadResource(WebViewview,Stringurl){
  19. super.onLoadResource(view,url);
  20. if(url.contains("Home/Image")){
  21. activity.createCamera();
  22. }
  23. }
  24. @Override
  25. publicbooleanshouldOverrideUrlLoading(WebViewview,Stringurl){
  26. Stringmatch="Home/Image/";
  27. inti=url.indexOf(match);
  28. if(i>0){
  29. cameraId=url.substring(i+match.length());
  30. activity.createCamera();
  31. returntrue;
  32. }
  33. returnfalse;
  34. }
  35. });
  36. webView.setWebChromeClient(newWebChromeClient(){
  37. @Override
  38. publicvoidonGeolocationPermissionsShowPrompt(
  39. Stringorigin,GeolocationPermissions.Callbackcallback){
  40. super.onGeolocationPermissionsShowPrompt(origin,callback);
  41. callback.invoke(origin,true,false);
  42. }
  43. });
  44. }
  45. publicvoidcreateCamera(){
  46. Intentintent=newIntent("android.media.action.IMAGE_CAPTURE");
  47. startActivityForResult(intent,2000);
  48. }
  49. @Override
  50. publicvoidonActivityResult(intrequestCode,intresultCode,Intentdata){
  51. if(resultCode==Activity.RESULT_OK&&requestCode==2000){
  52. Bitmapthumbnail=(Bitmap)data.getExtras().get("data");
  53. ByteArrayOutputStreambos=newByteArrayOutputStream();
  54. thumbnail.compress(CompressFormat.JPEG,75,bos);
  55. byte[]imagebytes=bos.toByteArray();
  56. ByteArrayBodybab=newByteArrayBody(imagebytes,"image/jpeg",
  57. UUID.nameUUIDFromBytes(imagebytes).toString()+".jpg");
  58. HttpClientclient=newDefaultHttpClient();
  59. HttpPostpost=newHttpPost(baseURL+"Home/UploadPicture");
  60. MultipartEntityreqEntity=
  61. newMultipartEntity(HttpMultipartMode.BROWSER_COMPATIBLE);
  62. reqEntity.addPart("photo",bab);
  63. try{
  64. reqEntity.addPart("ID",newStringBody(cameraId,"text/plain",
  65. Charset.forName("UTF-8")));
  66. }catch(UnsupportedEncodingExceptione1){
  67. //TODOAuto-generatedcatchblock
  68. e1.printStackTrace();
  69. }
  70. post.setEntity(reqEntity);
  71. try{
  72. HttpResponseresponse=client.execute(post);
  73. BufferedReaderreader=newBufferedReader(
  74. newInputStreamReader(
  75. response.getEntity().getContent(),"UTF-8"));
  76. StringsResponse;
  77. StringBuilders=newStringBuilder();
  78. while((sResponse=reader.readLine())!=null){
  79. s=s.append(sResponse);
  80. }
  81. }catch(ClientProtocolExceptione){
  82. //TODOAuto-generatedcatchblock
  83. e.printStackTrace();
  84. }catch(IOExceptione){
  85. //TODOAuto-generatedcatchblock
  86. e.printStackTrace();
  87. }
  88. webView.loadUrl(webView.getUrl());
  89. }
  90. }
  91. }

iOS

Objective-C iOS , , , Windows Phone Android. WebCameraViewController.m, . 11, UIWebView shouldStartLoadWithRequest, URL . URL , "NO" UIImagePickerController. - . -, ASIFormDataRequest (allseeing-i.com/ASIHTTPRequest) UIWebView "" .

. 11. iOS

  1. -(void)choosefromCamera{
  2. UIImagePickerController*picker=[[UIImagePickerControlleralloc]init];
  3. picker.delegate=self;
  4. picker.mediaTypes=[NSArrayarrayWithObjects:(NSString*)kUTTypeImage,nil];
  5. if([UIImagePickerController
  6. isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]){
  7. picker.sourceType=UIImagePickerControllerSourceTypeCamera;
  8. }else{
  9. picker.sourceType=UIImagePickerControllerSourceTypePhotoLibrary;
  10. }
  11. [selfpresentModalViewController:pickeranimated:YES];
  12. }
  13. -(void)imagePickerController:(UIImagePickerController*)picker
  14. didFinishPickingMediaWithInfo:(NSDictionary*)info{
  15. UIImage*image=[infoobjectForKey:UIImagePickerControllerOriginalImage];
  16. NSData*jpg=UIImageJPEGRepresentation(image,0.3);
  17. [pickerdismissModalViewControllerAnimated:YES];
  18. [pickerrelease];
  19. NSString*url=
  20. [NSStringstringWithFormat:@"%@:7511/WorkOrders/UploadPicture",baseURL];
  21. ASIFormDataRequest*request=
  22. [ASIFormDataRequestrequestWithURL:[NSURLURLWithString:url]];
  23. [requestaddData:jpgwithFileName:[
  24. NSStringstringWithFormat:@"%@.jpg",[selfGetUUID]]
  25. andContentType:@"image/jpeg"forKey:@"photo"];
  26. [requestaddPostValue:cameraIdforKey:@"ID"];
  27. [requestsetDelegate:self];
  28. [requestsetDidFinishSelector:@selector(imageUploaded:)];
  29. [requestsetDidFailSelector:@selector(imageUploaded:)];
  30. [requeststartSynchronous];
  31. [webViewreload];
  32. }
  33. -(void)imageUploaded:(ASIFormDataRequest*)request{
  34. NSString*response=[requestresponseString];
  35. NSLog(@"%@",response);
  36. }
  37. -(BOOL)webView:(UIWebView*)webViewshouldStartLoadWithRequest:(
  38. NSURLRequest*)request
  39. navigationType:(UIWebViewNavigationType)navigationType{
  40. NSURL*url=[requestURL];
  41. NSString*str=[urlabsoluteString];
  42. NSRangerange=[strrangeOfString:@"WorkOrders/Image/"];
  43. if(range.location!=NSNotFound){
  44. cameraId=[strsubstringFromIndex:range.location+17];
  45. [cameraIdretain];
  46. NSLog(@"%@",cameraId);
  47. [selfchoosefromCamera];returnNO;
  48. }else{
  49. returnYES;
  50. }
  51. }

, - ? . , , . , , , .

, ASP.NET MVC 3 URL - "Home/Image", - , (. 12). , , , . , , .

A Simple File Upload Form for Graceful Degradation
. 12.

.

- , . , jQuery Mobile, , -, .

, , .

  • , , , . , , , . , .
  • - , , - . - .
  • , . .

, - . "/" , . , , .

- -, .

. , , .

(Shane Church) - EffectiveUI (, ). Microsoft .NET Framework ASP.NET Microsoft 2002 . s-church.net. EffectiveUI effectiveui.com .

(Dr.James McCaffrey).



  »
   »
   
  » : 24.05.2012 
 

   WWW.ITSHOP.RU
Kaspersky Endpoint Security Russian Edition. 10-14 Node 1 year Base License
SAP Crystal Dashboard Design Departmental 2016 WIN INTL NUL
Oracle Database Standard Edition 2 Processor License
SAP Crystal Reports 2008 INTL WIN NUL License
SAP CRYSTAL Server 2013 WIN INTL 5 CAL License
 
...
 
   WWW.ITSHOP.RU
 
...
 
   WWW.ITSHOP.RU
 
...
 
3D | 3D    WWW.ITSHOP.RU
 
...
 
 
 Subscribe.ru
: CASE, RAD, ERP, OLAP
ITShop.ru - , , ,
Oracle " "
OS Linux . + + +
OLAP Business Intelligence: , ,
: , ,
 
 
Download
 
 
 
 



    
rambler's top100 Rambler's Top100