ユーザーに編集ビューと非編集ビューを許可するUIを構築しようとしています。現在は動作していますが、理解できない小さなバグがあります。JSFレンダリングとajaxの正確なワークフローが次の原因となっていることを誰かが説明できますか:
ページが初めてロードされるか、再ロードされると、編集モードをトリガーする「編集」ボタンが完全に正常に機能します。
左側のメニューで ajax を使用して id="currentChapters" セクションのコンテンツを更新したらすぐに、[編集] ボタンを 2 回クリックしてエディターをレンダリングする必要があります (どのイベントを使用してもかまいません - onclick、oncomplete、または JSF アクション)。編集ビューに入り、非編集ビューに戻った後、ボタンは最初のクリックで再び機能します。
- (コンテンツ全体ではなく) エディターのみをタグで囲み、navLink を [編集] ボタンとして使用すると、navLink は完全に正常に機能します。しかし、編集モードに入った後にエディターの内容を保存しようとすると、保存ボタンが 2 回目のクリックでしか機能しなくなりました。
この問題の原因となるイベントの流れに遅れをとることはありません。
<ui:composition template="../WEB-INF/templates/template-main.xhtml" >
<ui:define name="title">Projekt</ui:define>
<ui:define name="content">
<f:metadata>
<f:viewAction action="#{ProjectBacking.onPageLoad()}" />
</f:metadata>
<b:row class="projects-page">
<b:column span="3" styleClass="project-menu-left">
<b:accordion rendered="#{Login.user.team.project != null}">
<c:forEach items="#{ProjectBacking.projectDocuments}" var="document">
<b:panel title="#{document.documentName}">
<b:listLinks>
<c:forEach items="#{document.projectChapters}" var="chapter">
<b:navLink value="#{chapter.chapterOrder}.#{chapter.chapterName}" update="currentChapters">
<f:ajax listener="#{ProjectBacking.setCurrentContentForChapter(chapter)}"
render="currentChapters"/>
</b:navLink>
</c:forEach>
</b:listLinks>
</b:panel>
</c:forEach>
</b:accordion>
</b:column>
<b:column span="9" id="currentChapters" >
<h:form id="form-ckeditor">
<b:row rendered="#{Login.user.team.project != null}">
<b:column span="12">
<h:panelGroup layout="block" styleClass="user-content-header">
#{ProjectBacking.currentContent.projectChapter.projectDocument.documentName} - #{ProjectBacking.currentContent.projectChapter.chapterName}
</h:panelGroup>
</b:column>
<b:column span="12">
<h:panelGroup layout="block"
styleClass="project-content"
rendered="#{!ProjectBacking.isEdit}">
<h:outputText value="#{ProjectBacking.currentContent.content}"
escape="false"/>
</h:panelGroup>
</b:column>
<b:column span="3">
<b:commandButton value="Edit"
look="success"
rendered="#{!ProjectBacking.isEdit}"
action="#{ProjectBacking.setIsEditTrue()}"
update="currentChapters"
styleClass="full-width"/>
</b:column>
<b:column span="12">
<pe:ckEditor id="ckeditor"
rendered="#{ProjectBacking.isEdit}"
width="100%"
value="#{ProjectBacking.editorContent}">
<p:ajax event="save"
listener="#{ProjectBacking.updateProjectContent()}"
update="currentChapters" />
</pe:ckEditor>
</b:column>
</b:row>
</h:form>
</b:column>
</b:row>
</ui:define>
</ui:composition>
バッキング Bean:
@Named("ProjectBacking")
@SessionScoped
public class ProjectsBacking implements Serializable {
private static final long serialVersionUID = 1L;
//Field Properties
private String projectName;
private ProjectContent currentContent;
private String editorContent;
private boolean isEdit;
//Data Properties
private User currentUser;
private Project project;
private List<ProjectDocument> projectDocuments;
private List<ProjectContent> projectContents;
private String testContent;
@Inject
private LoginBacking login;
@EJB
private TeamDAO teamDAO;
@EJB
private ProjectDAO projectDAO;
@EJB
private DocumentDAO documentDAO;
@EJB
private ChapterDAO chapterDAO;
@EJB
private ProjectDocumentDAO projectDocumentDAO;
@EJB
private ProjectChapterDAO projectChapterDAO;
@EJB
private ProjectContentDAO projectContentDAO;
public void onPageLoad() {
currentUser = login.getUser();
projectDocuments = projectDocumentDAO.getAllProjectDocumentsOrderedByOrderNumber();
/*
When Page first time loaded, set the content on the page
to the content of the first chapter of the first document
(which currently is "Lastenheft")
*/
if(currentUser.getTeam().getProject()!= null && currentContent == null) {
currentContent = currentUser.getTeam().getProject().getProjectDocuments().get(0).getProjectChapters().get(0).getProjectContent();
}
}
public void setIsEditTrue() {
isEdit = true;
}
public String createProject() {
project = new Project();
project.setProjectName(projectName);
project.setTeam(currentUser.getTeam());
project = this.createInitialProjectContents(project);
project = projectDAO.createProject(project);
currentUser.setTeam(teamDAO.updateTeam(currentUser.getTeam()));
return "projects?faces-redirect=true";
}
public void setCurrentContentForChapter(ProjectChapter chapter) {
currentContent = projectContentDAO.getProjectContentForProjectChapterId(chapter.getId());
editorContent = currentContent.getContent();
isEdit = false;
}
public void updateProjectContent() {
editorContent = editorContent.replaceAll("\\r|\\n", "");
currentContent.setContent(editorContent);
currentContent = projectContentDAO.updateProjectContent(currentContent);
isEdit = false;
}
}