TOTVS Fluig Español

Árvore de páginas

Índice

Archivos básicos de Timeline

Como todos los componentes de Fluig, Timeline está desarrollado basándose en el framework de templates FreeMarker (. ftl). FreeMarker es responsable de la capa de visualización, sobre el cual está escrito todo el HTML del componente. Así como el(los) archivo(s) de FreeMarker, todos los componentes tienen sus archivos de CSS (.css) y JavaScript (.js).

Acción de Publicación

Para generar contenido en Timeline, Fluig utiliza el componente Publicación de contenido Poster. Poster es responsable de absorber todo el contenido ingresado por el usuario en el Campo de Publicación, y enviar para exhibir una nueva Publicación en Timeline.

Acción de Publicación en Timeline de Usuario

Acción de Publicación en Timeline de Usuario es el campo de texto donde el usuario introduce el contenido para su Publicación. Este campo de texto está disponible en su página inicial y todo el contenido se publica en su propia Timeline.

Botón de acción deshabilitado

Botón de acción habilitado

Comentario de una Publicación

Acción de Publicación en Timeline de Comunidad

Acción de Publicación en Timeline de Comunidad es el campo de texto donde el usuario introduce el contenido para su Publicación. Este campo de texto está disponible en cualquier página de Comunidad y todo el contenido se publica en la página de la Comunidad en cuestión.

Estado inicial

Aguardando contenido

Acción de visualización

Después de generar una nueva Publicación, este contenido se muestra en Timeline en diferentes tipos de visualización.

Estructura básica de una Publicación

En el HTML 
<div class="timeline-post-wrapper post post-parent" id="${post.postId}">
	<div class="timeline-post clearfix">
		<!-- Área de la foto del usuario -->
		<div class="timeline-user-photo-container">
			<div class="timeline-user-photo-container-hidden" data-user-popover="${post.user.alias}">
				<a href="#" class="timeline-link-user totvs-link-social timeline-link-user-photo" data-social-alias="${post.user.alias}" data-timeline-link-user>
					<img src="/social/api/rest/social/image/thumb/${post.user.alias}" class="timeline-user-photo">
				</a>
			</div>
		</div>
		<div class="post-content-container">
			<!-- Área de la información de la Publicación. Ej.: Nombre de usuario, fecha de Publicación, etc.-->
			<p class="timeline-post-header">
				<a href="#" class="timeline-link-user totvs-link-social" data-social-alias="${post.user.alias}" data-timeline-link-user>${user.name}</a>
				<span class="post-header-text"> - </span>
				<a href="${tenantURL}/post/${post.user.alias}/${post.postId}" class="timeline-link-date totvs-link-gray"> ${post.data}</a>
			</p>
			<!-- Contenido del post -->
			<p class="timeline-text-post">${post.text}</p>
		</div>
		<!--Lista de acciones disponibles en la Publicación-->
		<ul class="sociable-action-bar list-inline">
			<li><a href="#" class="sociable-link sociable-icon sociable-comment timeline-link-comment" data-timeline-link-comment>Comentar</a></li>
			<!-- More actions -->
		</ul>
	</div>
</div>

 

 

En el CSS 
/*
 *
 * Multiple definitions
 *
 */
.wcm-widget-timeline .timeline-post,
.wcm-widget-timeline .timeline-comments {
	padding: 8px 0 36px;
	position: relative;
}
...

 

Básicamente, el archivo CSS se divide en las siguientes categorías:
  • Multiple definitions: Todos los formatos que se encuentran en común en el componente Timeline como espaciado, tamaño de fuente, color de fuente, etc.
  • Unic definitions: Todos los formatos que son únicos en el componente Timeline como título del componente, etc.
  • Sociable actions bar: Formato del área de acciones de una Publicación. Ej.: Botones Me Gusta, Comentar, Compartir, etc.
  • Container comments list: Formato de la lista de Comentarios de una Publicación.
  • Youtube video format: Formato de una Publicación o Comentario con un video de Youtube prestado.
  • Content shared types: Formato básico de una Publicación con contenido compartido. Ej.: Imagen, Documentos, Usuarios, etc.

 

Response List of JSON (example):  Expand source 
[{
	"postId" : "10",	//post id
	"text" : "¡El Post!",	//post text
	"link" : "http://www.youtube.com/watch?v=E2LM3ZlcDnk", //link attached to the post
	"formattedLink" : "www.youtube.com/v/10", //formatted youtube link
	"youtubeVideoId" : "10",				//youtube video id
	"user" : {							//User that has created the post
		"id" : "1",		//User's id
		"name" : "User 01",//User's name
		"description" : "User 01 description",	//User's description
		"alias" : "user01",	//user's alias
		"type" : "USER",	//fixed
		"tenantId" : "22",			//tenant's id
		"lastUpdate" : "10008520",	//date of last time the user has been modified (in miliseconds)
		"create" : "10008520",		//date the user has been created (in miliseconds)
		"numberModerations" : "1",	   //number of the communities the user is moderator
		"state" : "ACTIVE"			   //Indicates the status of the user (it can be "UNCONFIRMED", "ACTIVE", "BLOCKED" or "REMOVED")
	},
	"social" : {					//Where the post was created
		"id" : "1",	//Community's id
		"name" : "Community 01",//community's name
		"description" : "Community 01 description",	//community's description
		"alias" : "community01",	//community's alias
		"type" : "COMMUNITY",		//it can be "USER" or "COMMUNITY"
		"tenantId" : "22",			//tenant's id
		"lastUpdate" : "10008520",	//date of last time the community has been modified (in miliseconds)
		"create" : "10008520",		//date the community has been created (in miliseconds)
		"numberParticipations" : "10", //number of users that participate of the community
		"numberModerations" : "1",	   //number of the community's moderators
		"hidden" : "false",			   //indicates if it is a hidden community
		"privateContent" : "false",	   //indicates if community's content is private
		"approvalRequired" : "true",   //indicates if it is necessary approval to join the community
		"admin" : "true",			   //indicates if the current user is community's administrator
		"state" : "ACTIVE"			   //Indicates the status of the community (it can be "UNCONFIRMED", "ACTIVE", "BLOCKED" or "REMOVED")
	},
	"creationDate" : "10008520",	//timestamp the post has been created (in miliseconds)
	"tenantId" : "22",			//tenant's id
	"linkedObject" : "null",	//the object attached to the post (image, document, video, etc)
	"type" : "DEFAULT",			//post type. It can be "DEFAULT" or "RECOMMENDATION"
	"visibility" : "PUBLIC",	//It can be PUBLIC, PRIVATE or CUSTOM
	"comments" : [{
		"id" : "10",		//comment's id
		"comment" : "Comment",	//comment's text
		"user" : {},		//who commented (the same structure the "user" post's field)
		"creationDate" : "10008520"	//timestamp the commented has been created
	}],
	"numberLikes" : "1",	//number of post's like
	"numberShares" : "1",	//number of times the post has been shared
	"numberComments" : "1",	//number of post's comments
	"numberDenouncements" : "1",	//number of times the post has been denounced
	"tags" : "tag tag02",		//tags in the post
	"url" : "/post/user/10"		//post's url
}] 

 

Tipos de Publicación

A continuación se presentan los tipos de Publicación disponibles en Timeline.

Nuevo Artículo creado

Publicación en la Comunidad

Publicación Compartida

Publicación con Imagen

Publicación con Mención y Hashtag

Modal para Compartir la Publicación

Estructura básica de un Comentario de una Publicación

En el HTML 
<div class="timeline-comments-container">
	<div class="commentList">
		<div class="timeline-comments clearfix postComment post-parent" id="${comment.id}">
			<!-- Área de la foto del usuario -->
			<div class="timeline-user-photo-container">
				<div class="timeline-user-photo-container-hidden" data-user-popover="${comment.user.alias}">
					<a href="#" class="timeline-link-user totvs-link-social timeline-link-user-photo" data-timeline-link-user="" data-social-alias="${comment.user.alias}">
						<img src="/social/api/rest/social/image/thumb/${comment.user.alias}" class="timeline-user-photo">
					</a>
				</div>
			</div>
			<div class="post-content-container">
				<!-- Área de información del comentario. Ej.: Nombre de usuario, fecha de Publicación, etc.-->
				<p class="timeline-post-header">
					<a href="#" class="timeline-link-user totvs-link-social" data-user-popover="${comment.user.alias}" data-timeline-link-user="" data-social-alias="${comment.user.alias}">Jerome McElroy</a>
					<span class="post-header-text"> - </span>
					<a href="#" class="timeline-link-date totvs-link-gray"> ${comment.data}</a>
				</p>
				<!-- Contenido del comentario -->
				<p class="timeline-text-post-comment">${comment.text}</p>
			</div>
			<!-- Lista de acciones disponibles en el comentario -->
			<ul class="sociable-action-bar list-inline clearfix">
				<li><a href="#" class="sociable-link sociable-icon sociable-support linkLikePostComment support" data-linklikepostcomment="">Apoiar</a></li>
				<!-- More actions -->
			</ul>
		</div>
	</div>
</div>

 

Tipos de comentarios

A continuación se presentan los tipos de Comentarios disponibles en Timeline.

Comentario de una Publicación

  • Sem rótulos