animaciones, scripting y multimedia con silverlight
TRANSCRIPT
-
8/14/2019 Animaciones, Scripting y Multimedia Con Silverlight
1/18
AANIMACIONES Y JAVASCRIPTNIMACIONES Y JAVASCRIPTPROGRAMMING ENPROGRAMMING EN
roberto hernndez-poumvp visualstudio.net securitylead architect
truenorth corporation
-
8/14/2019 Animaciones, Scripting y Multimedia Con Silverlight
2/18
AGENDAAGENDA
Que es Silverlight?Ver Webcast de Introduccin en MSDN Media Center
Modelo de Hosting en una Pgina Web.
Programacin Javascript
Animaciones en SilverlightUtilizando Expression Blend 2.0, Design. Integracin
con AJAX
-
8/14/2019 Animaciones, Scripting y Multimedia Con Silverlight
3/18
MODELO DE HOSTINGMODELO DE HOSTING
Las pginas web son los contenedores delas objetos SilverlightEl modelo de Hosting permite compatibilidad a
traves de diferentes browsers y plataformasutilizando HTML.
cab para IE.
xpi para Firefox
(Mozilla/Firefox BrowserExtension)dmg para Safari
(Macintosh OS X Disk Copy Disk Image File ).
-
8/14/2019 Animaciones, Scripting y Multimedia Con Silverlight
4/18
MODELO DE HOSTING (1)MODELO DE HOSTING (1)
Formas de incorporar en una pgina web
Silverlight.js, CreateSilverlight.js.
createSilverlight();
-
8/14/2019 Animaciones, Scripting y Multimedia Con Silverlight
5/18
MODELO DE HOSTING (2)MODELO DE HOSTING (2)
CreateSilverlight.jsfunction createMySilverlightControl()
{
Sys.Silverlight.createObject( "myxaml.xaml" // Source property value.
, parentElement // DOM reference to hosting DIV tag.
, "mySilverlightControl", // Unique control ID value., { // Control properties.
width:'300 // Width of rectangular region of control inpixels.
,height:'300' // Height of rectangular region of control inpixels.
,inplaceInstallPrompt:false // Determines whether to display in-place install // prompt if invalid version detected.
,background:'#D6D6D6', // Background color of control.
,isWindowless:'false', // Determines whether to display control
// in Windowless mode.
,framerate:'24 // MaxFrameRate property value.
,version:'0.9' // Control version to use.
}
onError:null OnError ro ert value event handler function name.
-
8/14/2019 Animaciones, Scripting y Multimedia Con Silverlight
6/18
PROGRAMANDO SILVERLIGHTPROGRAMANDO SILVERLIGHTCON JAVASCRIPT (1)CON JAVASCRIPT (1)
Todo el cdigo existe dentro demanejadores de eventos.
El evento ms bsico es el Loaded.
Los eventos se atan especificando elnombre de la funcin
Utilizando el moniker: javascript:
function root_Loaded(sender, args){
alert(canvas loaded!!!!);
}
http://schemas.microsoft.com/client/2007http://schemas.microsoft.com/winfx/2006/xamlhttp://schemas.microsoft.com/winfx/2006/xamlhttp://schemas.microsoft.com/client/2007 -
8/14/2019 Animaciones, Scripting y Multimedia Con Silverlight
7/18
PROGRAMANDO SILVERLIGHTPROGRAMANDO SILVERLIGHTCON JAVASCRIPT (2)CON JAVASCRIPT (2)
Los eventos consiste en:Sender: El objeto que es dueo del evento.
Args: Informacin adicional.
function root_Loaded(sender, args){
alert(sender.Name);
}
http://schemas.microsoft.com/client/2007http://schemas.microsoft.com/winfx/2006/xamlhttp://schemas.microsoft.com/winfx/2006/xamlhttp://schemas.microsoft.com/client/2007 -
8/14/2019 Animaciones, Scripting y Multimedia Con Silverlight
8/18
PROGRAMANDO SILVERLIGHTPROGRAMANDO SILVERLIGHTCON JAVASCRIPT (3)CON JAVASCRIPT (3)
Los elementos XAML exponen lossiguientes eventos comunes: Loaded.
MouseEnter.
MouseLeave.
MouseLeftButtonDown.
MouseLeftButtonUp.
-
8/14/2019 Animaciones, Scripting y Multimedia Con Silverlight
9/18
PROGRAMANDO SILVERLIGHTPROGRAMANDO SILVERLIGHTCON JAVASCRIPT (4)CON JAVASCRIPT (4)
Las propiedades de los elementos se lespuede asignar un valor utilizando dotsintax
function root_Loaded(sender, args){
// simple properties
sender.background = blue;
sender.width = 200;
sender.height = 300;
// event handlers
sender.MouseEnter = javascript:HandleMouseEnter ;
sender.MouseLeave = javascript:HandleMouseLeave ;
http://schemas.microsoft.com/client/2007http://schemas.microsoft.com/winfx/2006/xamlhttp://schemas.microsoft.com/winfx/2006/xamlhttp://schemas.microsoft.com/client/2007 -
8/14/2019 Animaciones, Scripting y Multimedia Con Silverlight
10/18
PROGRAMANDO SILVERLIGHTPROGRAMANDO SILVERLIGHTCON JAVASCRIPT (4)CON JAVASCRIPT (4)
Localizando elementos dentro del XAML
function root_Loaded(sender, args){
// attached properties
var rct1 = sender.findName(rectangle1);sender.findName(rectangle1);
rct1.Opacity = 0.5
alert(rct1.Name);
}
http://schemas.microsoft.com/client/2007http://schemas.microsoft.com/winfx/2006/xamlhttp://schemas.microsoft.com/winfx/2006/xamlhttp://schemas.microsoft.com/client/2007 -
8/14/2019 Animaciones, Scripting y Multimedia Con Silverlight
11/18
DEMO (1)DEMO (1)
Javascript (findname)
-
8/14/2019 Animaciones, Scripting y Multimedia Con Silverlight
12/18
PROGRAMANDO SILVERLIGHTPROGRAMANDO SILVERLIGHTCON JAVASCRIPT (5)CON JAVASCRIPT (5) Para crear elementos dinamicamente:
createFromXaml(str): Soporta la creacin utilizando fragmentos en linea de Xaml
function root_Loaded(sender, args){
// get reference to the host control var host = document.getElementById(theHost);
// The XAML
var xaml = ;
// Create a new object from the XAML fragment
var newRect = host.createFromXaml(xaml);
// Add to children collection
sender.children.add(newRect);
}
-
8/14/2019 Animaciones, Scripting y Multimedia Con Silverlight
13/18
DEMO (2)DEMO (2)
Putting it all together (Grid)
-
8/14/2019 Animaciones, Scripting y Multimedia Con Silverlight
14/18
ANIMACIONES ENANIMACIONES ENSILVERLIGHTSILVERLIGHT
XAML Event Triggers (Declarativos)
http://schemas.microsoft.com/client/2007http://schemas.microsoft.com/winfx/2006/xamlhttp://schemas.microsoft.com/winfx/2006/xamlhttp://schemas.microsoft.com/client/2007 -
8/14/2019 Animaciones, Scripting y Multimedia Con Silverlight
15/18
ANIMACIONES ENANIMACIONES ENSILVERLIGHT (2)SILVERLIGHT (2)
Animaciones invocadas por procedimientos enJavascript
function handleClick(sender, args){
var anim = sender.findName(grow1);
anim.begin();
}
http://schemas.microsoft.com/client/2007http://schemas.microsoft.com/winfx/2006/xamlhttp://schemas.microsoft.com/winfx/2006/xamlhttp://schemas.microsoft.com/client/2007 -
8/14/2019 Animaciones, Scripting y Multimedia Con Silverlight
16/18
ANIMACIONES ENANIMACIONES ENSILVERLIGHT (2)SILVERLIGHT (2)
-
8/14/2019 Animaciones, Scripting y Multimedia Con Silverlight
17/18
DEMO (3)DEMO (3)
My Media Player.
Full Screen Support.
-
8/14/2019 Animaciones, Scripting y Multimedia Con Silverlight
18/18
GRACIAS!!!GRACIAS!!!
Roberto Hernndez-Pou
+ 1 (787) 310-1378
http://community.rhpconsulting.net
http://www.truenorthcorporation.com
mailto:[email protected]:[email protected]://community.rhpconsulting.net/http://www.truenorthcorporation.com/http://www.truenorthcorporation.com/http://community.rhpconsulting.net/mailto:[email protected]:[email protected]