Histórico da Página
| HTML |
|---|
<div id="main-content" class="wiki-content group">
<h2 id="CamadavisualTimeline-Índice">Contents</h2>
<p>
<style type='text/css'>/*<![CDATA[*/
div.rbtoc1412695816643 {
padding: 0px;
}
div.rbtoc1412695816643 ul {
list-style: disc;
margin-left: 0px;
}
div.rbtoc1412695816643 li {
margin-left: 0px;
padding-left: 0px;
}
/*]]>*/
</style>
<div class='toc-macro rbtoc1412695816643'>
<ul class='toc-indentation'>
<li><a href='#CamadavisualTimeline-Índice'>Contents</a></li>
<li><a href='#CamadavisualTimeline-ArquivosbásicosdaTimeline'>Timeline
basic files</a></li>
<li><a href='#CamadavisualTimeline-AçãodePublicação'>Posting
Action</a>
<ul class='toc-indentation'>
<li><a
href='#CamadavisualTimeline-AçãodePublicaçãonaTimelinedeUsuário'>Posting
Action on User Timeline</a>
<ul class='toc-indentation'>
<li><a href='#CamadavisualTimeline-Botãodeaçãodesabilitado'>Action
button disabled</a></li>
<li><a href='#CamadavisualTimeline-Botãodeaçãohabilitado'>Action
button enabled</a></li>
<li><a
href='#CamadavisualTimeline-ComentáriodeumaPublicação'>Comment
on a Post</a></li>
</ul></li>
<li><a
href='#CamadavisualTimeline-AçãodePublicaçãonaTimelinedeComunidade'>Posting
Action on Community Timeline</a>
<ul class='toc-indentation'>
<li><a href='#CamadavisualTimeline-Estadoinicial'>Initial
Status</a></li>
<li><a href='#CamadavisualTimeline-Aguardandoconteúdo'>Waiting
for Content</a></li>
</ul></li>
</ul></li>
<li><a href='#CamadavisualTimeline-Açãodevisualização'>Viewing
action</a>
<ul class='toc-indentation'>
<li><a
href='#CamadavisualTimeline-EstruturabásicadeumaPublicação'>Basic
structure of a Post</a></li>
<li><a href='#CamadavisualTimeline-TiposdePublicação'>Types
of posts</a>
<ul class='toc-indentation'>
<li><a href='#CamadavisualTimeline-NovoArtigocriado'>New
article created</a></li>
<li><a href='#CamadavisualTimeline-PublicaçãonaComunidade'>Post
in community</a></li>
<li><a href='#CamadavisualTimeline-PublicaçãoCompartilhada'>Shared
Post</a></li>
<li><a href='#CamadavisualTimeline-PublicaçãocomImagem'>Post
with Image</a></li>
<li><a
href='#CamadavisualTimeline-PublicaçãocomMençãoeHashtag'>Post
with mention and hashtag</a></li>
<li><a
href='#CamadavisualTimeline-ModalparaCompartilhamentodaPublicação'>Modal
for Sharing a Post</a></li>
</ul></li>
<li><a
href='#CamadavisualTimeline-EstruturabásicadeumComentáriodeumaPublicação'>Basic
structure of a Comment on a Post</a></li>
<li><a href='#CamadavisualTimeline-Tiposdecomentários'>Types
of comments</a>
<ul class='toc-indentation'>
<li><a
href='#CamadavisualTimeline-ComentáriodeumaPublicação.1'>Comment
on a Post</a></li>
</ul></li>
</ul></li>
</ul>
</div>
</p>
<h2 id="CamadavisualTimeline-ArquivosbásicosdaTimeline">Timeline
basic files</h2>
<p>
As all Fluig components, the Timeline is developed based on the
template framework <a href="http://freemarker.org/"
class="external-link" rel="nofollow">FreeMarker</a> (.ftl).
FreeMarker is responsible for the viewing layer, where all HTML from
the component is written. As well as the <a
href="http://freemarker.org/" class="external-link" rel="nofollow">FreeMarker</a>
file(s), all components have their CSS (.css) and JavaScript (.js)
files.
</p>
<h2 id="CamadavisualTimeline-AçãodePublicação">Posting Action</h2>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">In order
to generate content on the Timeline, Fluig uses the Content posting
component <strong>Poster</strong>. Poster is responsible for
absorbing all content typed by the user in the Post field and send it
to be exhibited as a new Post on the Timeline.
</span>
</p>
<h3 id="CamadavisualTimeline-AçãodePublicaçãonaTimelinedeUsuário">Posting
Action on User Timeline</h3>
<p>Posting Action on User Timeline is the text field where the user
types the content for Posting. This text field is available at your
home page and all the content is posted on your own Timeline.</p>
<h4 id="CamadavisualTimeline-Botãodeaçãodesabilitado">Action
button disabled</h4>
<p>
<img class="confluence-embedded-image"
src="attachments/113804460/113838374.png"
data-image-src="attachments/113804460/113838374.png">
</p>
<h4 id="CamadavisualTimeline-Botãodeaçãohabilitado">Action button
enabled</h4>
<p>
<img class="confluence-embedded-image"
src="attachments/113804460/113838375.png"
data-image-src="attachments/113804460/113838375.png">
</p>
<h4 id="CamadavisualTimeline-ComentáriodeumaPublicação">Comment on
a Post</h4>
<p>
<img class="confluence-embedded-image"
src="attachments/113804460/113838494.png"
data-image-src="attachments/113804460/113838494.png">
</p>
<h3 id="CamadavisualTimeline-AçãodePublicaçãonaTimelinedeComunidade">Posting
Action on Community Timeline</h3>
<p>Posting Action on Community Timeline is the text field where the
user types the content for Posting. This text field is available in
any Community page and all content is published on the Community page
in question.</p>
<h4 id="CamadavisualTimeline-Estadoinicial">Initial Status</h4>
<p>
<img class="confluence-embedded-image"
src="attachments/113804460/113838376.png"
data-image-src="attachments/113804460/113838376.png">
</p>
<h4 id="CamadavisualTimeline-Aguardandoconteúdo">Waiting for
Content</h4>
<p>
<img class="confluence-embedded-image"
src="attachments/113804460/113838377.png"
data-image-src="attachments/113804460/113838377.png">
</p>
<h2 id="CamadavisualTimeline-Açãodevisualização">Viewing action</h2>
<p>After generating a new Post, this content is shown on the
Timeline in different types of view.</p>
<h3 id="CamadavisualTimeline-EstruturabásicadeumaPublicação">Basic
structure of a Post</h3>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeHeader panelHeader pdl"
style="border-bottom-width: 1px;">
<b>In HTML</b>
</div>
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><div class="timeline-post-wrapper post post-parent" id="${post.postId}">
<div class="timeline-post clearfix">
<!-- User picture area -->
<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">
<!-- Post information area. For instance, user name, post date, 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>
<!-- Post content -->
<p class="timeline-text-post">${post.text}</p>
</div>
<!-- List of actions available in the Post -->
<ul class="sociable-action-bar list-inline">
<li><a href="#" class="sociable-link sociable-icon sociable-comment timeline-link-comment" data-timeline-link-comment>Comment</a></li>
<!-- More actions -->
</ul>
</div>
</div></pre>
</div>
</div>
<div>
<div>
<p> </p>
<p> </p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeHeader panelHeader pdl"
style="border-bottom-width: 1px;">
<b>In CSS</b>
</div>
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: css; gutter: false"
style="font-size: 12px;">/*
*
* Multiple definitions
*
*/
.wcm-widget-timeline .timeline-post,
.wcm-widget-timeline .timeline-comments {
padding: 8px 0 36px;
position: relative;
}
...</pre>
</div>
</div>
<p> </p>
</div>
<div>Basically, the CSS file is divided in the following
categories:</div>
<div>
<span style="font-size: 10.0pt; line-height: 13.0pt;"><br /></span>
</div>
</div>
<div>
<ul>
<li><strong>Multiple definitions</strong>: All formatting that
are common in the Timeline component such as spacing, font size,
font color, etc.</li>
<li><strong>Unic definitions</strong>: All formatting that are
unique in the Timeline component such as the component title, etc.</li>
<li><strong>Sociable actions bar</strong>: Formatting in the
action area of a Post. Example: Like, Comment, Share buttons, etc.</li>
<li><strong>Container comments list</strong>: Formatting of a
list of Post Comments.</li>
<li><strong>Youtube video format</strong>: Formatting of a Post
or Comment with a rendered Youtube video.</li>
<li><strong>Content shared types</strong>: Basic formatting of a
Post with shared content. Example: Image, Documents, Users, etc.</li>
</ul>
</div>
<div>
<p> </p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeHeader panelHeader pdl hide-border-bottom"
style="border-bottom-width: 1px;">
<b class=" code-title">Response List of JSON (example):</b> <span
class="collapse-source expand-control"><span
class="expand-control-icon icon"> </span><span
class="expand-control-text">Expand source</span></span>
</div>
<div class="codeContent panelContent pdl hide-toolbar">
<pre
class="theme: Confluence; brush: javascript; collapse: true; gutter: false"
style="font-size: 12px;">[{
"postId" : "10", //post id
"text" : "A 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
}] </pre>
</div>
</div>
<p> </p>
</div>
<h3 id="CamadavisualTimeline-TiposdePublicação">Types of Posts</h3>
<p>
<span>The types of posts available in the Timeline are listed
below.</span>
</p>
<h4 id="CamadavisualTimeline-NovoArtigocriado">New article created</h4>
<p>
<img class="confluence-embedded-image"
src="attachments/113804460/113838427.png"
data-image-src="attachments/113804460/113838427.png">
</p>
<h4 id="CamadavisualTimeline-PublicaçãonaComunidade">Post in
community</h4>
<p>
<img class="confluence-embedded-image"
src="attachments/113804460/113838428.png"
data-image-src="attachments/113804460/113838428.png">
</p>
<h4 id="CamadavisualTimeline-PublicaçãoCompartilhada">Shared Post</h4>
<p>
<img class="confluence-embedded-image"
src="attachments/113804460/113838429.png"
data-image-src="attachments/113804460/113838429.png">
</p>
<h4 id="CamadavisualTimeline-PublicaçãocomImagem">Post with Image</h4>
<p>
<img class="confluence-embedded-image"
src="attachments/113804460/113838430.png"
data-image-src="attachments/113804460/113838430.png">
</p>
<h4 id="CamadavisualTimeline-PublicaçãocomMençãoeHashtag">Post
with mention and hashtag</h4>
<p>
<img class="confluence-embedded-image"
src="attachments/113804460/113839106.png"
data-image-src="attachments/113804460/113839106.png">
</p>
<h4 id="CamadavisualTimeline-ModalparaCompartilhamentodaPublicação">Modal
for Sharing a Post</h4>
<p>
<img class="confluence-embedded-image"
src="attachments/113804460/113838431.png"
data-image-src="attachments/113804460/113838431.png">
</p>
<h3
id="CamadavisualTimeline-EstruturabásicadeumComentáriodeumaPublicação">Basic
structure of a Comment on a Post</h3>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeHeader panelHeader pdl"
style="border-bottom-width: 1px;">
<b>In HTML</b>
</div>
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><div class="timeline-comments-container">
<div class="commentList">
<div class="timeline-comments clearfix postComment post-parent" id="${comment.id}">
<!-- User picture area -->
<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">
<!-- Comment information area. For instance, user name, post date, 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>
<!-- Content comment -->
<p class="timeline-text-post-comment">${comment.text}</p>
</div>
<!-- List of actions available in the comment -->
<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></pre>
</div>
</div>
<p> </p>
<h3 id="CamadavisualTimeline-Tiposdecomentários">Types of comments</h3>
<p>The types of Comments on the Post available in the Timeline are
listed below.</p>
<h4 id="CamadavisualTimeline-ComentáriodeumaPublicação.1">Comment
on a Post</h4>
<p>
<img class="confluence-embedded-image"
src="attachments/113804460/113838470.png"
data-image-src="attachments/113804460/113838470.png">
</p>
</div>
|
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas