sobota, 9 czerwca 2012

ASP.NET MVC + HTML5: odc.1

Trochę wybranych informacji z tematyki tandemu ASP.NET MVC i HTML5.

ASP.NET MVC

  • do udostępniania danych zamiast WCF, jeszcze łatwiej używać danych JSON z poziomu klienta HTML/JS
  • własny dependency resolver (np. oparty o Unity.MVC3 zapewniający odpowiednie disposowanie obiektów związanych z aplikacją web)

//kontroler do udostępniania danych w JSON, nie dla widoku HTML/CSS

public class DataServiceController: Controller {

IAppointmentRepository  _appointmentRepository;

//zasilanie z IoC

public DataServiceController(IAppointmentRepository appointmentRepository) {

         _appointmentRepository = appointmentRepository;

}

public ActionResult GetAppointment(int id)  {  //JsonResult dziedziczy po ActionResult

         return Json(_AppointmentRepository.GetAppointment(id), JsonRequestBehavior.AllowGet);

}

}

http://html5boilerplate.com/ – szablony użycia

  • najlepsze praktyki
  • cross-browser
  • HTML5
  • optymalizacje dla mobilnych przeglądarek
  • wsparcie także dla starszych IE
  • rozwiązania dla wydruku
  • hostowane w sieci skrypty

BoilerPlate na starcie

  • HTML5 doctype
  • kodowanie utf-8
  • tryb renderowania IE na edge (w ostatniej wersji)
  • viewport na device-width
  • jQuery pobierane z sieci z lokalnym fallbackiem
  • ładowany Modernizr

Modyfikacja _Layout.cshtml

  • Wspólny “master” dla wszystkich widoków/stron HTML w ASP.NET MVC
  • Możemy umieścić w nim odpowiednie elementy z index.html z BoilerPlate
    • obsługa różnych wersji IE
    • utf-8
    • tryb renderowania IE na edge
    • referencje do skryptów (jQuery z lokalnym fallbackiem, Modernizr, …)
    • prośba o zainstalowanie przeglądarki zgodnej z HTML5 (IE od wersji 9, Chrome, …) //aplikacja dedykowana dla nowoczesnych przeglądarek

///<reference path=”…” />  - intellisense w VS działa także dla naszych skryptów

Biblioteki dla canvas:

Łatwe rysowanie wykresu za pomocą Flot:

var chartOptions = {

series: {

       lines:  { show: true, fill: true },

       points:  { show: true, radius: 5 }

},

grid: {  hoverable: true,  autoHighlight: true },

legend: {  position:  ‘se’ },  //south-east

yaxis:  { max:  maxY, min: minY },

xaxis:  { minTickSize:  [1, ‘hour’],  mode:  ‘time’,  timeformat:  ‘%h %P’,  twelveHourClock: true }

};

$.plot(canvasDiv, [

color: color,

shadowSize:  4,

label: ‘Rytm serca’,

data: heartData

}], chartOptions);

SVG

Biblioteka:  Raphael

Proste rysowanie interaktywnych diagramów kołowych:

raphael(‘Aaa’, x, y)

.pieChart(scene.width / 2,

                   scene.height / 4 + 10,

                    66, values, labels, “#fff”);

Tekst na ścieżce:

<svg>

<defs>

       <path id=”path1” d=”M75,20 a1,1 0 0,0 100,0” />

</defs>

<text x=”10” y=”100” style=”fill:green;”>

          <textPath xlink:href=”#path1”>Koko koko svg spoko</textPath>

</text>

</svg>

Video HTML5

http://www.mirovideoconverter.com/

http://videojs.com/

Brak komentarzy: