<div id="main-content" class="wiki-content group">
<h2 id="Timeline-Índice">Índice<>Index</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<>Index</a>
<ul class='toc-indentation'>
<li><a href='#Timeline-BinddeelementosHTMLafunções'>Bind>Binding
deHTML elementoselements HTMLto a funciones<functions</a>
<ul class='toc-indentation'>
<li><a
href='#Timeline-Exemplodeumbinddafunçãosalvaremumbotão'>Ejemplo>Example
deof una bindSave defunction labind funciónon guardar en un botón<a button</a></li>
</ul></li>
<li><a href='#Timeline-Funçõesdocomponente'>Funciones del>Component
componente<functions</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,
(el, ev)</a></li>
<li><a href='#Timeline-linkRemovePost(el,ev)'>linkRemovePost(el,
(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,
(el, ev)</a></li>
<li><a href='#Timeline-timelineLinkRecommend(el,ev)'>timelineLinkRecommend(el,
(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,
(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,
fechadata)</a></li>
<li><a href='#Timeline-showRealtimePost(eventName,data)'>showRealtimePost(eventName,
fechadata)</a></li>
<li><a href='#Timeline-removeRealtimePost(eventName,data)'>removeRealtimePost(eventName,
fechadata)</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 esis una feed deof posts realizados por usuarios que el usuariomade by users that the user follows or
siguecommunities othat comunidadesthey en que él participaparticipate in.<br />A>Through travésthat deit ella esis
posiblepossible interactuarto interact conwith losthe posts, by yacommenting seaon comentándolosthem, haciendo clicenjoying
enthem meor gustasharing o compartiéndolosthem.
</p>
<p>
AsíAs comowell todosas losall componentesthe decomponents laof capaFluig social de Fluiglayer, Timeline uses the
utiliza el facilitador SuperWidget enfacilitator lain capathe deJavascript Javascriptlayer.<br />Para>To learn more
saberabout másthe sobrefunctioning elof funcionamientothe de SuperWidget, consultesee elthe manual enat <a
<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>Binding de elementosHTML
HTMLelements ato funciones<functions</h3>
<p>
ParaTo asociarbind unan eventoevent ato unan elementoHTML HTMLelement, esyou necesariomust seguir el
formato a continuaciónfollow the format below.<br />El componente HTML debe poseer un
atributo <strong>fecha>The
HTML component must have an attribute <strong>data-</strong> el cual recibirá el bind de funciones
de widgetwhich
will receive the bind of the widget functions.
</p>
<h4 id="Timeline-Exemplodeumbinddafunçãosalvaremumbotão">Ejemplo>Example
deof una bindSave defunction labind funciónon guardar en un botón<a button</h4>
<p> </p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeHeader panelHeader pdl"
style="border-bottom-width: 1px;">
<b>En<b>In HTML</b>
</div>
<div class="codeContent panelContent pdl">
<pre class="theme: Eclipse; brush: html/xml; gutter: false"
style="font-size: 12px;"><button data-salvarsave-dados>Guardardata>Save datosdata</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<b>In elthe archivo .js delfile of the widget</b>
</div>
<div class="codeContent panelContent pdl">
<pre class="theme: Eclipse; brush: javascript; gutter: false"
style="font-size: 12px;">bindings: {
local: {
'salvar-dadossave data': [' click_salvarDadossaveData']
}
},
//implementacionimplementation deof laSave función guardarfunction
guardarDatossaveData: function (el, ev) {
//escribawrite lathe acciónsave deldata botónbutton guardar-datosaction aquíhere
}, ...</pre>
</div>
</div>
<p>La<p>The funciónfunction atribuidaattributed ato unan elementoHTML HTMLelement poseehas 2 parámetrosparameters:</p>
<ul>
<li><strong>el:</strong> RepresentaIt represents elthe propiobutton botónitself. EnIn el casothe
del ejemplocase of the example: <button data-salvarsave-dados>Guardardata>Save datosdata</button></li>
<li><strong>ev:</strong> representa el objeto del eventoit represents the object of the event
disparado<fired</li>
</ul>
<p>
Observe que no es necesario agregar el prefijoNote that it is not necessary to add the prefix <strong>data-</strong>.<br />El>The
array atribuidoassigned esis unaa string enin elthe estándar EVENTO_FUNÇÃOEVENT_FUNCTION standard. VariasVarious
combinacionescombinations deof eventoevent x funciónfunction may sebe puedenattributed atribuirto a un únicosingle
elementoelement.<br />Los>The bindings hechosmade enon elthe objetolocal localobject seare refierenrelated ato
elementosHTML HTMLelements dentroinside delthe div of delthe widget. YAnd losthe binds hechosmade enon elthe
objeto global sonobject paraare elementosfor fueraelements deleither divoutside dethe lawidget widget,div oor
retiradosremoved delfrom divthe dewidget ladiv widgetby poranother otro script, comoas esit elis casothe decase lasof
modalesthe deljQueryUI jQueryUImodals.
</p>
<h3 id="Timeline-Funçõesdocomponente">Funciones>Component del componente<functions</h3>
<p>A<p>Below continuaciónare sethe presentandetails aof detallethe las funciones de TimelineTimeline functions.</p>
<h4 id="Timeline-likeSocial(el,ev)">likeSocial(el, ev)</h4>
<p>
AcciónAction of delthe elementoelement 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;">. EsIt is
responsableresponsible porfor elthe eventoevent deto darlike unposts meand gustaother a posts y otros objetos
socialessocial objects.</span>
</p>
<h4 id="Timeline-sendComment(el,ev)">sendComment(el, ev)</h4>
<p>Evento del elemento data<p>Data-send-comment element event, responsableresponsible porfor crearcreating elthe
comentariocomment deof una post uor otroanother objetosocial socialobject.</p>
<h4 id="Timeline-linkRemovePost(el,ev)">linkRemovePost(el, ev)</h4>
<p>Acción<p>Action parafor elthe elementoelement fechadata-linkRemovePost, responsableresponsible porfor
eliminarremoving elthe post.</p>
<h4 id="Timeline-linkRemovePostComment(el,ev)">linkRemovePostComment(el,
ev)</h4>
<p>Acción<p>Action parafor elthe elementoelement data-linkRemovePostComment, responsableresponsible
porfor eliminarremoving elthe comentariocomment defrom una post.</p>
<h4 id="Timeline-likeListSocial(el,ev)">likeListSocial(el, ev)</h4>
<p>
AcciónAction parafor elthe elementoelement 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;">, responsableresponsible
porfor exhibirdisplaying unaa listalist conof losusers usuarioswho quesupported apoyarona un post uor objeto
social object.</span>
</p>
<h4 id="Timeline-timelineLinkRecommend(el,ev)">timelineLinkRecommend(el,
ev)</h4>
<p>Acción<p>Action parafor elthe elementoelement data-timeline-link-recommend, responsible
responsablefor porsharing compartira un post uor objetosocial socialobject.</p>
<h4 id="Timeline-showMore(el,ev)">showMore(el, ev)</h4>
<p>
AcciónAction of delthe elementoelement data-showMore.<br />Cuando>When the timeline esis
renderizadorendered, sea exhibemaximum unsize tamañoof máximoposts deis postsdisplayed.<br />Si>If there hayare postsany
más antiguos que el límite presentado, esteposts that are older than the limit shown, this link seis exhibe al usuario,displayed to
para exhibir los próximosthe user to display the next N posts.
</p>
<h4 id="Timeline-btnShowMoreComments(el,ev)">btnShowMoreComments(el,
ev)</h4>
<p>
AcciónAction of delthe elementoelement data-btn-show-more-comments.<br />Cuando>When timelinethe
estimeline is renderizadorendered, sea exhibemaximum unsize límiteof máximocomments deper comentarios por post.<br />Siis
hay comentarios más antiguos que el límite presentado, este link se
exhibe al usuario, para exhibir los próximos N comentarios.
<displayed.<br />If there are any comments that are older than the
limit shown, this link is displayed to the user to display the next N
comments.
</p>
<h4 id="Timeline-timelineLinkSocial(el,ev)">timelineLinkSocial(el,
ev)</h4>
<p>
AcciónAction of delthe elementoelement timeline-link-community.<br />Esta>This funciónfunction es unis
facilitadoran paraenabler redireccionarto laredirect páginathe alpage perfilto dea unuser's usuarioprofile, community or
comunidadsocial uobject objetothat socialhas quean posea alias.
</p>
<h4 id="Timeline-timelineLinkComment(el,ev)">timelineLinkComment(el,
ev)</h4>
<p>Acción<p>Action delof the elementoelement fechadata-timeline-link-comment, responsable porresponsible
exhibirfor eldisplaying campothe decomment textotext de comentariosfield.</p>
<h4 id="Timeline-showPostedPost(eventName,data)">showPostedPost(eventName,
fechadata)</h4>
<p>
AcciónAction disparadatriggered porby elthe eventoevent "newPostEvent".<br />Este>This eventoevent seis
disparatriggered by porthe widget poster, cuandowhen una nuevonew post is esmade realizadoby porthe eluser,
usuario,and yis esimmediately inmediatamenterendered renderizadoto para élthem.  
</p>
<h4 id="Timeline-showRealtimePost(eventName,data)">showRealtimePost(eventName,
data)</h4>
<p>
AcciónAction disparadatriggered porby elthe eventoevent "newpostalert".<br />Este>This event eventohappens
ocurrewhen a cuandonew sepost crearelated unto nuevothe postlogged relacionadoin conuser el usuario
conectadois created.<br />Un>A servicio Java
service entoncesthen identificaidentifies quiénesthe son los
usuarios que necesitan ser notificados y dispara un evento para Node
Server con los ids del usuario receptor y el id delusers who need to be notified and triggers
an event to the Node server with the recipient user’s id and the id of
the post.<br />Node
Server entonces avisa al usuario a través del evento "newpostalert"
que renderiza el post en la pantalla>The Node server then notifies the user by using the
"newpostalert" event that renders the post on the screen.
</p>
<h4 id="Timeline-removeRealtimePost(eventName,data)">removeRealtimePost(eventName,
data)</h4>
<p>Acción<p>Action disparadatriggered porby elthe eventoevent "removepostalert", quewhich notifica anotifies
timeline eliminar elthe timeline to remove the post.</p>
<h4 id="Timeline-validateTitleNotPublish()">validateTitleNotPublish()</h4>
<p>
EstaThis function funciónchecks verificawhether sithe eluser's timeline delhas usuario posee posts.<br />Si>If
estáit is vacíaempty, exhibeit endisplays elan títulointernationalized unmessage mensaje"No internacionalizado posts"No hayin
posts"the title.<br />De>Otherwise, loit contrario,displays exhibethe elmessage mensaje "Últimas
publicaciones""Latest posts".
</p>
<h4 id="Timeline-renderPost(postId)">renderPost(postId)</h4>
<p>Realiza<p>It unaperforms llamadaa REST ycall and recuperaretrieves losthe datosdata defrom una post, yand
entoncesthen lorenders renderizait.</p>
<h4 id="Timeline-renderComment(commentId)">renderComment(commentId)</h4>
<p>Realiza<p>It unaperforms llamadaa REST ycall and recuperaretrieves losthe datosdata (enin HTML) defrom una
comentario y lo devuelvecomment, and then returns it.</p>
<h4 id="Timeline-listPosts(event)">listPosts(event)</h4>
<p>Esta<p>This función esfunction llamadais solamentecalled poronly laby funciónthe showMore function.</p>
<h4 id="Timeline-listComments(event,domElement)">listComments(event,
domElement)</h4>
<p>Esta<p>This funciónfunction esis usadaused solamenteonly porby lathe función
btnShowMoreComments function.</p>
<h4 id="Timeline-countLength(el,ev)">countLength(el, ev)</h4>
<p>
FunciónFunction parato hacercount elthe conteocharacters dein caracteresthe enrecommendation eltext campo de texto defield.<br />When
recomendación.<br />Cuando el límite de caracteres se excede, este
deshabilita el botón y coloca un borde rojo en el campothe character limit is exceeded, it disables the button and adds a red
border in the field.
</p>
<h4 id="Timeline-getYoutubeInfo()">getYoutubeInfo()</h4>
<p>
EstaThis funciónfunction iteraiterates sobreover elthe timeline yaalready renderizadorendered, enin búsqueda desearch
of posts quethat poseenhave videos defrom Youtube.<br />Para>For cadaeach post encontrado,found avia
travésthe delattribute atributo "data-post-youtube-id" se realiza una requisición, a JSONP request is made to a
JSONPYoutube aservice unto servicioretrieve delthe Youtubetitle paraof recuperar el título del the video.<br />Esa>This
funciónfunction secan puedebe ejecutarperformed diversasseveral vecestimes, puesbecause cada vez que se
encuentra uneach time a post conwith
a video defrom Youtube is found, el atributo
the attribute "data-post-youtube-id" se consumeis
consumed, evitandopreventing quethe seoperation repita la
operaciónfrom repeating.
</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 autorizadoThis event is triggered when the user tries to click on a link of a
post recommended by another user.<br />Although the system validates
if the user has permission to view the post, a validation is done on
the client´s end by accessing a REST service that defines and returns
the permission.
</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<p>This funciónfunction esis responsableresponsible porfor hacercounting elthe conteo de comentarios ycomments and
modificarchanging the el texto en una publicacióntext in a post.</p>
<h4 id="Timeline-watch(el,ev)">watch(el, ev)</h4>
<p>
AcciónAction of delthe elementoelement 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;">. EsIt is
responsableresponsible for porthe elevent eventoto defollow seguirup posts yand otros objetos socialesother social
objects.</span>
</p>
<h4 id="Timeline-getNumberWatchs(options,el)">getNumberWatchs(options,
el)</h4>
<p>Esta<p>This function funciónis esresponsible responsablefor pormaking hacera unacall llamadaon enthe elserver servidorand
yreturning devolverthe elnumber númeroof deusers usuariosthat quefollow siguenup lathe publicaciónpost.</p>
<h4 id="Timeline-watchListSocial(el,ev)">watchListSocial(el, ev)</h4>
<p>
AcciónAction parafor elthe elementoelement 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;">, responsableresponsible
porfor exhibirdisplaying unaa listalist conof losusers usuarioswho quefollow siguenup una post uor objeto
social object.</span>
</p>
<h4 id="Timeline-toggleStatusClass(el,isAction,actionType)">toggleStatusClass(el,
isAction, actionType)</h4>
<p>Esta<p>This funciónfunction esis responsableresponsible porfor modificarchanging elthe estatusstatus deof losthe
botonesbuttons quethat cambianchange recolors coloreswhen althey ejecutarperform unaan acciónaction sobreon el mismoit.</p>
<p> </p>
</div>
|