Megaevento Gusenet 2014

Tengo el placer de anunciaros que ya tenemos abierto el registro para el megaevento informático del año en España.

más información en http://www.gusenet.org y registro en la misma web.

Como empezar con aplicaciones web SPA (Simple Page Application)

Hola amig@s,

hace poco me interesé por las aplicaciones web y su forma de trabajar (sólo la parte front-end), que tecnologías, frameworks y herramientas se utilizan en este mundo nuevo, y ayyyy Dios mío, ¿pero esto que lo que es?, como dirían en Murcia, ay pobre de mi, aquí hay miles de conceptos nuevos, varios frameworks, etc. y lo que es peor, hay varios navegadores con distintas versiones y comportamientos distintos, uyyyyy, palabra mayores.

Así que mediante esta entrada no pretendo establecer una norma o directriz de trabajo, ni tiene que ser utilizada como referencia para la creación de aplicaciones web, ni SPA ni nada de nada. Esta entrada es solo para transmitir mi experiencia con ellas y que es lo que más me ha gustado a título personal.

 

Herramientas.

Mi herramienta de trabajo hasta este momento era VS2010, así que decidí comprobar que tal iba VS2012 con las apps webs y me encontré con la creación de proyectos ASP.NET, pero uff hay varios tipos, ¿cuál de ellos?,:

 

 

 

 seleccioné MVC 4 (Model View Controller), sonaba bien y además el patrón lo conozco, y aquí viene la pregunta de nuevo, motor de vistas? que aplicación? "razor?", que es razor?, ah sí, es nuevo y Scott Guthrie dice que es "Easy to Learn", pues nada a por razor:

 

 

 

Pero "oh my God", si ha salido el VS2013, que trae de nuevo? nooooooo, cambia todo a una aplicación ASP.NET? un sólo punto de partida??:

 

Sí, parece que ahora ya sólo tenemos un punto de entrada y luego podremos seleccionar más opciones a gusto del consumidor.

 

Así que adelante, ya podemos empezar.

Patrón en el front-end

Lo del patrón es un cachondeo, y digo un cachondeo por las conversaciones en el bar con unas cervezas, que si angular es MVC, que no lo es que es MVW, que si es mejor usar uno MVVM, bueno, en definitiva, hay varios frameworks y se implementan varios patrones, de lo que he podido averiguar es esto:

 

angularjs es MVC pero ellos lo llaman MVW (Model View Wathever)

knockout es MVVM, o sea como el que usamos en las aplicaciones SL5, WPF o XAML de W8/8.1 y WP8.

También tenemos Durandal que dice que es un patrón MV* es decir, MV y lo que quieras, pero no lo conozco y no puedo opinar.
 

Vistas

Pues lo dicho anteriormente: Razor más HTML5 y CSS, con Bootstrap. Más cosas?, sí más, mucho más, a ver, HTML5 me lo dejo para el final, CSS y Bootstrap, pues vamos a ver un poco de código:

 

BootStrap en HTML

 

aghhhhh me da algo!!! cuanta class y nombre raro,,,,,

 

Pues sí, Bootstrap es http://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29, un front-end para construir y mantener aplicaciones web y websites de una forma fácil y consistente (no quiero ni saber como era antes) y puedes intentar entender sus tripas en: http://getbootstrap.com/css/ y adaptártelo o mejor te pasas por aquí y te compras una plantilla que te facilite las cosas.

 

CSS de Bootstrap

Pues iba a mostrar algo de código CSS pero como creo que nunca voy a tratarlo o investigar porque es de lo más enrevesado que he visto prefiero ni verlo. Con esto quiero decir que si tienes una buena plantilla o un buen equipo de diseño no tienes que tener mayores problemas.

 

Controladores

El tema de controladores he decidido usar angular como pieza fundamental de comunicación front-end<>back-end, siguiendo los consejos del amigo Pedro, que aunque el blog esté en Geeks, es de los que se puede leer.


 

 

Reflexión:

HTML5 , sí, sí, HTML5, eso es como los titulares del periódico, una vez lo leas ponte a leerte el artículo con todo lo demás, bootstrap, angular, css y sus clases, puffff, hay mucha materia.
 

¿Porqué SPA?, porque está de moda, así de fácil, luego ya indagas y te das cuenta de la comodidad de un framework como angularjs y como me gustan los comics pues eso:

 

 

y te vas a ver algo, ¿unos primeros pasos? y te compras un libro para completar el aprendizaje y ya tienes el lío montado y unas semanas de pelea con todo.

 

Y como no podía ser de otra manera todo esto que explico en este post se lo debo al gran @_pedrohurtado que me tiene entretenido siempre con cosas así.

 

Blogs que sigo

Eduard Tomàs

Marc Rubiño
José M. Aguilar
Juanma (el gulnor)
Gisela

 

 

Errores tontos

Errores como estos se deben evitar siempre. Para esto existen herramientas de control de errores como es Try Catch en .NET y On Error en Visual Basic. No debemos dudar en usarlas porque se pueden producir situaciones como estas:


Lo dicho, mucho cuidado con el código y mucho tests, no poner en producción código no testeado por favor.

Un saludo
Oscar Montesinos

De tabla a TreeView en ASP NET 2.0 (versión 2)

Creamos la tabla donde tenemos la relación padre a hijo infinito para n nodos y con padres sin hijos:

CREATE TABLE [dbo].[Tabla](
[codigo] [int] IDENTITY(1,1) NOT NULL,
[nombre] [varchar](50) NOT NULL,
[padre] [int] NULL
) ON [PRIMARY]

GO

la rellenamos con datos:
INSERT Tabla (nombre)
VALUES('Luis')--sin padre
INSERT Tabla (nombre,padre)
VALUES('Pedro',1)
INSERT Tabla (nombre)
VALUES('Alfonso')
INSERT Tabla (nombre)
VALUES('Jose')
INSERT Tabla (nombre,padre)
VALUES('Fidel', 4)
INSERT Tabla (nombre,padre)
VALUES('Pepe', 2)


dentro de la etiqueta script de un formulario o página ASP incluyes este código:

Dim conex As String = "Data Source=OSCARVAIO;Initial Catalog=Pruebas;Integrated Security=True"
Sub Page_Load()
If Not Page.IsPostBack Then
FillNodes()
End If
End Sub
Sub FillNodes()
Dim ds As DataSet = GetData()
For Each masterRow As DataRow In ds.Tables("Padres").Rows
Dim masterNode As New TreeNode(masterRow("nombre").ToString(), masterRow("codigo").ToString())
If IsDBNull(masterRow("padre")) Then
TreeView1.Nodes.Add(masterNode)
Else
For Each node As TreeNode In TreeView1.Nodes
If node.Value.ToString() = masterRow("codigo").ToString() Then
masterNode = node
Exit For
End If
If node.ChildNodes.Count > 0 Then
Dim NodoEncontrado As TreeNode = BuscarNodo(node, masterRow("codigo").ToString())
If Not NodoEncontrado Is Nothing Then
masterNode = NodoEncontrado
Exit For
End If
End If
Next
End If
For Each childRow As DataRow In masterRow.GetChildRows("Hijo")
Dim childNode As New TreeNode(childRow("nombre").ToString(), childRow("codigo").ToString())
masterNode.ChildNodes.Add(childNode)
Next
Next
End Sub
Function BuscarNodo(ByVal arbol As TreeNode, ByVal codigo As String) As TreeNode
For Each node As TreeNode In arbol.ChildNodes
If node.Value.ToString() = codigo Then
BuscarNodo = node
Exit Function
End If
If node.ChildNodes.Count > 0 Then
BuscarNodo(node, codigo)
End If
Next
BuscarNodo = Nothing
End Function
Function GetData() As DataSet
Dim conn As SqlConnection = New SqlConnection(conex)
Dim sqlCat As StringBuilder = New StringBuilder()
sqlCat.Append("SELECT ISNULL(P1.Codigo,P2.Codigo) AS codigo, ")
sqlcat.Append("ISNULL(P1.nombre,P2.nombre) AS nombre, ")
sqlcat.Append("ISNULL(P1.padre,P2.padre) AS padre ")
sqlcat.Append("FROM ")
sqlCat.Append("(SELECT Tabla.codigo, Tabla.nombre, Tabla.padre ")
sqlcat.Append("FROM Tabla WHERE padre IS NULL) AS P1 ")
sqlcat.Append("FULL JOIN ")
sqlCat.Append("(SELECT T2.* ")
sqlcat.Append("FROM Tabla AS T1 INNER JOIN Tabla AS T2 ON ")
sqlcat.Append("T1.padre=T2.codigo) AS P2 ON ")
sqlcat.Append("P1.Codigo=P2.Codigo ")
sqlcat.Append("ORDER BY codigo ")
Dim sqlProd As String = "SELECT Codigo,Nombre,Padre FROM Tabla AS Hijos WHERE Padre<>''"
Dim daCat As SqlDataAdapter = New SqlDataAdapter(sqlCat.ToString(), conn)
Dim daProd As SqlDataAdapter = New SqlDataAdapter(sqlProd, conn)
Dim ds As DataSet = New DataSet()
daCat.Fill(ds, "Padres")
daProd.Fill(ds, "Hijos")
ds.Relations.Add("Hijo", _
ds.Tables("Padres").Columns("Codigo"), _
ds.Tables("Hijos").Columns("Padre"))
Return ds
End Function


Lo ejecutas y podrás ver como se rellena el treeView.

Esta entrada del blog la he cambiado para completarla para n jerarquías y para padres huérfanos según algunos comentarios recibidos a fecha del '06/09/2008'.