Histórico da Página
| HTML |
|---|
<div id="main-content" class="wiki-content group">
<h2 id="Timeline-Índice">Índice</h2>
<p>
<style type='text/css'>/*<![CDATA[*/
div.rbtoc1412695813820 {
padding: 0px;
}
div.rbtoc1412695813820 ul {
list-style: disc;
margin-left: 0px;
}
div.rbtoc1412695813820 li {
margin-left: 0px;
padding-left: 0px;
}
/*]]>*/
</style>
<div class='toc-macro rbtoc1412695813820'>
<ul class='toc-indentation'>
<li><a href='#Timeline-Índice'>Índice</a>
<ul class='toc-indentation'>
<li><a href='#Timeline-BinddeelementosHTMLafunções'>Bind
de elementos HTML a funciones</a>
<ul class='toc-indentation'>
<li><a
href='#Timeline-Exemplodeumbinddafunçãosalvaremumbotão'>Ejemplo
de un bind de la función guardar en un botón</a></li>
</ul></li>
<li><a href='#Timeline-Funçõesdocomponente'>Funciones del
componente</a>
<ul class='toc-indentation'>
<li><a href='#Timeline-likeSocial(el,ev)'>likeSocial(el,
ev)</a></li>
<li><a href='#Timeline-sendComment(el,ev)'>sendComment(el,
ev)</a></li>
<li><a href='#Timeline-linkRemovePost(el,ev)'>linkRemovePost(el,
ev)</a></li>
<li><a href='#Timeline-linkRemovePostComment(el,ev)'>linkRemovePostComment(el,
ev)</a></li>
<li><a href='#Timeline-likeListSocial(el,ev)'>likeListSocial(el,
ev)</a></li>
<li><a href='#Timeline-timelineLinkRecommend(el,ev)'>timelineLinkRecommend(el,
ev)</a></li>
<li><a href='#Timeline-showMore(el,ev)'>showMore(el, ev)</a></li>
<li><a href='#Timeline-btnShowMoreComments(el,ev)'>btnShowMoreComments(el,
ev)</a></li>
<li><a href='#Timeline-timelineLinkSocial(el,ev)'>timelineLinkSocial(el,
ev)</a></li>
<li><a href='#Timeline-timelineLinkComment(el,ev)'>timelineLinkComment(el,
ev)</a></li>
<li><a href='#Timeline-showPostedPost(eventName,data)'>showPostedPost(eventName,
fecha)</a></li>
<li><a href='#Timeline-showRealtimePost(eventName,data)'>showRealtimePost(eventName,
fecha)</a></li>
<li><a href='#Timeline-removeRealtimePost(eventName,data)'>removeRealtimePost(eventName,
fecha)</a></li>
<li><a href='#Timeline-validateTitleNotPublish()'>validateTitleNotPublish()</a></li>
<li><a href='#Timeline-renderPost(postId)'>renderPost(postId)</a></li>
<li><a href='#Timeline-renderComment(commentId)'>renderComment(commentId)</a></li>
<li><a href='#Timeline-listPosts(event)'>listPosts(event)</a></li>
<li><a href='#Timeline-listComments(event,domElement)'>listComments(event,
domElement)</a></li>
<li><a href='#Timeline-countLength(el,ev)'>countLength(el,
ev)</a></li>
<li><a href='#Timeline-getYoutubeInfo()'>getYoutubeInfo()</a></li>
<li><a href='#Timeline-linkRecommendedPost(el,ev)'>linkRecommendedPost(el,
ev)</a></li>
<li><a
href='#Timeline-commentListSocial(domElement,typeAction)'>commentListSocial(domElement,
typeAction)</a></li>
<li><a href='#Timeline-watch(el,ev)'>watch(el, ev)</a></li>
<li><a href='#Timeline-getNumberWatchs(options,el)'>getNumberWatchs(options,
el)</a></li>
<li><a href='#Timeline-watchListSocial(el,ev)'>watchListSocial(el,
ev)</a></li>
<li><a
href='#Timeline-toggleStatusClass(el,isAction,actionType)'>toggleStatusClass(el,
isAction, actionType)</a></li>
</ul></li>
</ul></li>
</ul>
</div>
</p>
<p>
Timeline es un feed de posts realizados por usuarios que el usuario
sigue o comunidades en que él participa.<br />A través de ella es
posible interactuar con los posts, ya sea comentándolos, haciendo clic
en me gusta o compartiéndolos.
</p>
<p>
Así como todos los componentes de la capa social de Fluig, Timeline
utiliza el facilitador SuperWidget en la capa de Javascript.<br />Para
saber más sobre el funcionamiento de SuperWidget consulte el manual en
<a href="http://tdn.totvs.com/display/fluig/Super+Widget"
rel="nofollow">http://tdn.totvs.com/display/fluig/Super+Widget</a>.
</p>
<h3 id="Timeline-BinddeelementosHTMLafunções">Bind de elementos
HTML a funciones</h3>
<p>
Para asociar un evento a un elemento HTML, es necesario seguir el
formato a continuación.<br />El componente HTML debe poseer un
atributo <strong>fecha-</strong> el cual recibirá el bind de funciones
de widget.
</p>
<h4 id="Timeline-Exemplodeumbinddafunçãosalvaremumbotão">Ejemplo
de un bind de la función guardar en un botón</h4>
<p> </p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeHeader panelHeader pdl"
style="border-bottom-width: 1px;">
<b>En HTML</b>
</div>
<div class="codeContent panelContent pdl">
<pre class="theme: Eclipse; brush: html/xml; gutter: false"
style="font-size: 12px;"><button data-salvar-dados>Guardar datos</button></pre>
</div>
</div>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeHeader panelHeader pdl"
style="border-bottom-width: 1px;">
<b>En el archivo .js del widget</b>
</div>
<div class="codeContent panelContent pdl">
<pre class="theme: Eclipse; brush: javascript; gutter: false"
style="font-size: 12px;">bindings: {
local: {
'salvar-dados': ['click_salvarDados']
}
},
//implementacion de la función guardar
guardarDatos: function(el, ev) {
//escriba la acción del botón guardar-datos aquí
}, ...</pre>
</div>
</div>
<p>La función atribuida a un elemento HTML posee 2 parámetros:</p>
<ul>
<li><strong>el:</strong> Representa el propio botón. En el caso
del ejemplo: <button data-salvar-dados>Guardar datos</button></li>
<li><strong>ev:</strong> representa el objeto del evento
disparado</li>
</ul>
<p>
Observe que no es necesario agregar el prefijo <strong>data-</strong>.<br />El
array atribuido es una string en el estándar EVENTO_FUNÇÃO. Varias
combinaciones de evento x función se pueden atribuir a un único
elemento.<br />Los bindings hechos en el objeto local se refieren a
elementos HTML dentro del div del widget. Y los binds hechos en el
objeto global son para elementos fuera del div de la widget, o
retirados del div de la widget por otro script, como es el caso de las
modales del jQueryUI.
</p>
<h3 id="Timeline-Funçõesdocomponente">Funciones del componente</h3>
<p>A continuación se presentan a detalle las funciones de Timeline.</p>
<h4 id="Timeline-likeSocial(el,ev)">likeSocial(el, ev)</h4>
<p>
Acción del elemento data-<span
style="font-size: 10.0pt; line-height: 13.0pt;">timeline-link-like</span><span
style="font-size: 10.0pt; line-height: 13.0pt;">. Es
responsable por el evento de dar un me gusta a posts y otros objetos
sociales.</span>
</p>
<h4 id="Timeline-sendComment(el,ev)">sendComment(el, ev)</h4>
<p>Evento del elemento data-send-comment, responsable por crear el
comentario de un post u otro objeto social.</p>
<h4 id="Timeline-linkRemovePost(el,ev)">linkRemovePost(el, ev)</h4>
<p>Acción para el elemento fecha-linkRemovePost, responsable por
eliminar el post.</p>
<h4 id="Timeline-linkRemovePostComment(el,ev)">linkRemovePostComment(el,
ev)</h4>
<p>Acción para el elemento data-linkRemovePostComment, responsable
por eliminar el comentario de un post.</p>
<h4 id="Timeline-likeListSocial(el,ev)">likeListSocial(el, ev)</h4>
<p>
Acción para el elemento data-<span
style="font-size: 10.0pt; line-height: 13.0pt;">like-list-social</span><span
style="font-size: 10.0pt; line-height: 13.0pt;">, responsable
por exhibir una lista con los usuarios que apoyaron un post u objeto
social.</span>
</p>
<h4 id="Timeline-timelineLinkRecommend(el,ev)">timelineLinkRecommend(el,
ev)</h4>
<p>Acción para el elemento data-timeline-link-recommend,
responsable por compartir un post u objeto social.</p>
<h4 id="Timeline-showMore(el,ev)">showMore(el, ev)</h4>
<p>
Acción del elemento data-showMore.<br />Cuando timeline es
renderizado, se exhibe un tamaño máximo de posts.<br />Si hay posts
más antiguos que el límite presentado, este link se exhibe al usuario,
para exhibir los próximos N posts
</p>
<h4 id="Timeline-btnShowMoreComments(el,ev)">btnShowMoreComments(el,
ev)</h4>
<p>
Acción del elemento data-btn-show-more-comments.<br />Cuando timeline
es renderizado, se exhibe un límite máximo de comentarios por post.<br />Si
hay comentarios más antiguos que el límite presentado, este link se
exhibe al usuario, para exhibir los próximos N comentarios.
</p>
<h4 id="Timeline-timelineLinkSocial(el,ev)">timelineLinkSocial(el,
ev)</h4>
<p>
Acción del elemento timeline-link-community.<br />Esta función es un
facilitador para redireccionar la página al perfil de un usuario,
comunidad u objeto social que posea alias.
</p>
<h4 id="Timeline-timelineLinkComment(el,ev)">timelineLinkComment(el,
ev)</h4>
<p>Acción del elemento fecha-timeline-link-comment, responsable por
exhibir el campo de texto de comentarios.</p>
<h4 id="Timeline-showPostedPost(eventName,data)">showPostedPost(eventName,
fecha)</h4>
<p>
Acción disparada por el evento "newPostEvent".<br />Este evento se
dispara por widget poster, cuando un nuevo post es realizado por el
usuario, y es inmediatamente renderizado para él.  
</p>
<h4 id="Timeline-showRealtimePost(eventName,data)">showRealtimePost(eventName,
data)</h4>
<p>
Acción disparada por el evento "newpostalert".<br />Este evento
ocurre cuando se crea un nuevo post relacionado con el usuario
conectado.<br />Un servicio Java entonces identifica quiénes son los
usuarios que necesitan ser notificados y dispara un evento para Node
Server con los ids del usuario receptor y el id del post.<br />Node
Server entonces avisa al usuario a través del evento "newpostalert"
que renderiza el post en la pantalla.
</p>
<h4 id="Timeline-removeRealtimePost(eventName,data)">removeRealtimePost(eventName,
data)</h4>
<p>Acción disparada por el evento "removepostalert", que notifica a
timeline eliminar el post.</p>
<h4 id="Timeline-validateTitleNotPublish()">validateTitleNotPublish()</h4>
<p>
Esta función verifica si el timeline del usuario posee posts.<br />Si
está vacía, exhibe en el título un mensaje internacionalizado "No hay
posts".<br />De lo contrario, exhibe el mensaje "Últimas
publicaciones"
</p>
<h4 id="Timeline-renderPost(postId)">renderPost(postId)</h4>
<p>Realiza una llamada REST y recupera los datos de un post, y
entonces lo renderiza.</p>
<h4 id="Timeline-renderComment(commentId)">renderComment(commentId)</h4>
<p>Realiza una llamada REST y recupera los datos (en HTML) de un
comentario y lo devuelve.</p>
<h4 id="Timeline-listPosts(event)">listPosts(event)</h4>
<p>Esta función es llamada solamente por la función showMore.</p>
<h4 id="Timeline-listComments(event,domElement)">listComments(event,
domElement)</h4>
<p>Esta función es usada solamente por la función
btnShowMoreComments.</p>
<h4 id="Timeline-countLength(el,ev)">countLength(el, ev)</h4>
<p>
Función para hacer el conteo de caracteres en el campo de texto de
recomendación.<br />Cuando el límite de caracteres se excede, este
deshabilita el botón y coloca un borde rojo en el campo.
</p>
<h4 id="Timeline-getYoutubeInfo()">getYoutubeInfo()</h4>
<p>
Esta función itera sobre el timeline ya renderizado, en búsqueda de
posts que poseen videos de Youtube.<br />Para cada post encontrado, a
través del atributo "data-post-youtube-id" se realiza una requisición
JSONP a un servicio del Youtube para recuperar el título del video.<br />Esa
función se puede ejecutar diversas veces, pues cada vez que se
encuentra un post con video de Youtube, el atributo
"data-post-youtube-id" se consume, evitando que se repita la
operación.
</p>
<h4 id="Timeline-linkRecommendedPost(el,ev)">linkRecommendedPost(el,
ev)</h4>
<p>
Este evento es disparado cuando el usuario intenta hacer clic en un
link de un post recomendado por otro usuario.<br />Aunque el sistema
valida si el usuario tiene permiso de visualizar el post, se realiza
una validación en el lado del cliente, accediendo a un servicio REST
que devuelve el acceso autorizado.
</p>
<h4 id="Timeline-commentListSocial(domElement,typeAction)">
commentListSocial(<span style="font-size: 1.2em;">domElement</span><span
style="font-size: 1.2em;">, typeAction)</span>
</h4>
<p>Esta función es responsable por hacer el conteo de comentarios y
modificar el texto en una publicación.</p>
<h4 id="Timeline-watch(el,ev)">watch(el, ev)</h4>
<p>
Acción del elemento data-<span
style="font-size: 10.0pt; line-height: 13.0pt;">timeline-link-watch</span><span
style="font-size: 10.0pt; line-height: 13.0pt;">. Es
responsable por el evento de seguir posts y otros objetos sociales.</span>
</p>
<h4 id="Timeline-getNumberWatchs(options,el)">getNumberWatchs(options,
el)</h4>
<p>Esta función es responsable por hacer una llamada en el servidor
y devolver el número de usuarios que siguen la publicación.</p>
<h4 id="Timeline-watchListSocial(el,ev)">watchListSocial(el, ev)</h4>
<p>
Acción para el elemento data-<span
style="font-size: 10.0pt; line-height: 13.0pt;">watch-list-social</span><span
style="font-size: 10.0pt; line-height: 13.0pt;">, responsable
por exhibir una lista con los usuarios que siguen un post u objeto
social.</span>
</p>
<h4 id="Timeline-toggleStatusClass(el,isAction,actionType)">toggleStatusClass(el,
isAction, actionType)</h4>
<p>Esta función es responsable por modificar el estatus de los
botones que cambian re colores al ejecutar una acción sobre el mismo.</p>
<p> </p>
</div>
|
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas