Bohater UI bez front-end developera?  Tworzenie aplikacji z wykorzystaniem ASP.NET MVC DEVEXPRESS. Prezentacja z konferencji GET.NET - 2014 Gdańsk.

1. Bohater UI bez front-end developera?
Tworzenie aplikacji z wykorzystaniem
ASP.NET MVC DEVEXPRESS
Piotr Stola GET.NET Gdańsk 2014

2. 1. Wprowadzenie
2. Dlaczego DevExpress ASP.NET MVC ?
3. Koncepcje implementacji
4. DevExpress ASP.NET MVC - Outlook Style Demo
5. Podsumowanie i wnioski
6. Q & A
Agenda

3. • Piotr Stola – piotr.stola@quick-solution.net
• niezależny konsultant programista
• rozwiązania na szeroko rozumiany sektor finansowy
• ASP NET MVC , .NET / C#, Devexpress MVC
Umbraco CMS / CMF
• popołudniami – Mistrz Jedi i architekt LEGO ;)
“Feel the force!” - Yoda
Wprowadzenie

4. 1. Rodzaje rozszerzeń MVC i ich funkcjonalności
2. Łatwość używania i implementacji
3. Wsparcie dla urządzeń mobilnych
oraz możliwość dostosowania i modyfikacji
wyglądu kontrolek
Dlaczego DevExpress ASP.NET MVC ?

5. 1. Rodzaje kontrolek i ich funkcjonalności
• jakie kontrolki wchodzą w skład pakietu
(nie chodzi o ilość)
http://demos.devexpress.com/mvc
• wydajność przy dużych zbiorach danych
• jakie posiadają funkcje
• sprawdzenie co jest na road mapie dostawcy
Dlaczego DevExpress ASP.NET MVC ?

6. 2. Łatwa implementacji
• możliwości konfiguracji dodatkowych
funkcjonalności rozszerzeń MVC
• jaki dostaniemy rezultat HTML po renderingu
• czy istnieje wsparcie Java Script Client API
• czy istnieje wsparcie dla AJAX
Dlaczego DevExpress ASP.NET MVC ?

7. 3. Wsparcie dla urządzeń mobilnych oraz
możliwość dostosowania wyglądu kontrolek
• dostępne istniejące motywy ( themes )
• łatwość tworzenia i implementacji nowych
motywów
• możliwość zmiany CSS poszczególnych
rozszerzeń MVC.
Dlaczego DevExpress ASP.NET MVC ?

8. Koncepcje implementacji
Deklaracja rozszerzeń
@Html.DevExpress().Button(settings =>
{
settings.Name = "btnSample";
settings.UseSubmitBehavior = false;
settings.ClientSideEvents.Click =
"function(s,e) { alert(s.name); }";
}).GetHtml();
@Html.DevExpress().Button(
DevButtonHelper.CreateButtonSettings()
).GetHtml();

9. Koncepcje implementacji
Bindowanie danych
@model IEnumerable<User>
@Html.DevExpress().GridView(
settings => {
settings.Name = "GridBinding";
settings.Width = Unit.Percentage(100);
settings.CallbackRouteValues = new {
Controller = "Home",
Action = "DataBindingPartial"
};
settings.Columns.Add(column => {
column.FieldName = "LastUpdated";
column.Caption = "Last Updated";
column.ColumnType = MVCxGridViewColumnType.DateEdit;
column.PropertiesEdit.DisplayFormatString = "HH:mm:ss";
});
}).Bind(Model).GetHtml()

10. Koncepcje implementacji
Event-driven
@Html.DevExpress().PivotGrid(
settings => {
settings.Name = "pivotGrid";
settings.HtmlCellPrepared = (sender, e) => {
if (e.ColumnField != null &&
e.ColumnField.FieldName == "stockDate" ) {
e.Cell.BackColor =
System.Drawing.ColorTranslator.FromHtml("#F0F0F0");
}
};
settings.BeforeGetCallbackResult = (sender, e) => {
var pivot = ((MVCxPivotGrid)sender);
pivot.Fields["srManager"].Visible = true;
};
}).Bind(Model).GetHtml()

11. “Do or do not. There is no try” - Yoda
Devexpress MVC Outlook - Demo

12. Koncepcje implementacji
Client-Side API i Client-Side Events
<script type="text/javascript">
function ShowAlert() {
alert("Hello World (" + btnMasterClick.name + ")");
}
</script>
@Html.DevExpress().Button(settings => {
settings.Name = "btnMasterClick";
settings.EnableClientSideAPI = true;
settings.Text = "Click me !";
settings.ClientSideEvents.Click = "ShowAlert";
}).

13. Podstawowe koncepcje implementacji
Czym jest Callback ?
Asynchroniczne wywołanie metody po stornie serwera.
Warunki :
• W roszerzeniu MVC, w property CallbackRouteValues musi
znaleźć się logika routingu
• W kontrolerze musi znajdować się metoda, które obsłuży dany
Callback
• Rozszerzenie MVC musi zostać umieszczane w odrębnym
PartialView
• W PartielView nie mogą się znajdować inne tagi HTML, może
być tylko kod implementujący dane rozszerzenie

14. “Do or do not. There is no try” - Yoda
Devexpress MVC Outlook - Demo

15. Podstawowe koncepcje implementacji
Themes

16. “Do or do not. There is no try” - Yoda
Devexpress MVC Outlook - Demo

17. 1. Warto używać rozszerzeń DEVEXPRESS MVC w
określonych scenariuszach
2. Dość niski próg wejściowy jeżeli chodzi o naukę
implementacji
3. Zyskujemy
• szybszą implementację funkcjonalności w projekcie
• UI out of the box
• aplikacja, która jest cross-browser
• wsparcie dla JavaScrip i AJAXa - Callbacks
• wsparcie dla urządzeń mobilnych
4. Dobra relacja ceny kosztu zakupu do zaoszczędzonego
development poszczególnych funkcjonalności
Wnioski

18. 1. Dlaczego zdecydowaliśmy się na DevExpress ASP.NET MVC?
• warto zrobić sobie dokument ewaluacji i wcześniej ustalić
czego będziemy potrzebować w aplikacji
2. Zapoznaliśmy się z podstawowymi koncepcjami implementacji
• deklaracja rozszerzeń MVC w widokach
(GridView, PivotGrid ect.)
• bindowanie i renderowanie danych
• obsługa eventów
• Client API i Client Side Events
• wsparcie dla AJAXa – Callbacks
• motywy i wygląd rozszerzeń MVC
3. Wnioski
Podsumowanie

19. Q & A
“May the Force be with you”
Questions & Answers