I need to create a user interface where the content changes every time the user moves to a new page. However, the header and footer remains the same.
But, within the content, there is sometimes a left pane visible on some of the pages.
I'm not sure how can this be achieved since I'm new to using JSF.
Can someone please suggest a way?
Thanks!
You can achieve this by creating 2 different layouts and using for the correct layout
one with left rail
another without left rail
You need to look at JSF template with Facelets
Here are some links that you can refer
Link 1
Link 2
For the 'puzzly' composition of pages you need to use templating. Great overview can be found in the answer to How to include another XHTML in XHTML using JSF 2.0 Facelets?. The layout itself is HTML/CSS-related, so you need to check that out first.
If you want to produce one part of a template conditionally, there are two possibilities: to do that from a master template, or to do it from a template client. Of course, you could create many templates, as others recommend, but this is counterproductive and hard to maintain in my opinion.
If you want to render a part of template conditionally, you can include rendered="#{view.viewId = '...'}" attribute to JSF components in master template.
Alternatively, if you want to 'overwrite' the default part of a template, that for example has a left panel, just define the target area as an empty one in a template client like <ui:define name="left" />.
Related
I would like to know which are the different available approaches to add, modify and delete UI components before a page loaded.
A practical example that I should handle is the following:
In my ADF Fusion Web Application (developed with JDev12.1.3) there are the pages login.jspx and main.jspx: if the user logs in correctly navigation to main.jspx happens.
In main.jspx there is an empty menu bar that at runtime I would like to fill with menus and menu items when the page loads, in function of the logged in user.
In the same page, in function of the logged in user, I also would like to add at runtime some UI components (output texts, buttons, ...) whith the chance to set their properties.
Could you kindly advice me which approaches I can follow to accomplish these duties?
Thanks,
Federico
Why not using the rendered attribute? Based on the condition the components will be rendered or not.
Personally the two approaches i've used on my works where:
1. Using the beforePhaseListener on the f:view component. Example: Before Phase on JSF page. But it might cause you some problems when taking account of adf lifecycle, especially if you have integrated parts (or even some simple jQuery components...).
2. And i think this would just do fine in your case, use a f:event component of type "preRenderComponent". Example: How to use prerendercomponent. I suggest this second option
Note: It's true that these aren't ADF Faces components, but since it's built on top of JSF, they work as they should. I can assure you they do work on 11g and don't expect any problems on 12c.
I see two approaches. Use addChild() and related methods to physically add/remove menu items, or have the menu pre-built and use the visible property to show hide items.
As far as making this happen in custom code, you can use a Backing Bean (Managed Bean) that contains the code to determine what items to add/remove or make visible based on whatever criteria you choose. To call this code, you can 1) use the Invoke action in the rebinding layer - have it call the desired backing bean method - make sure to drag the Invoke action the TOP of the executables list. This is the older, less preferred method. The newer, more preferred method is to add the backing bean method to the Task flow and have it navigate to the deserted page. This method can be part of the navigation form another page. Ex: After successful Login, navigate to your method an chav sit navigate to the Main page. The method will execute before the page loads and will set values to have the items added or visible or not.
RichSelectOneChoice choiceList;
List child = choiceList.getChildren();
child.clear();
for (int i = 0; i < child.size(); i++){
child.remove(i);
}
if ("1..1".equalsIgnoreCase(ccCode)){
UISelectItem addChild = new UISelectItem();
addChild.setItemLabel("1..1");
addChild.setItemValue("1..1");
child.add(addChild);
} else if ("0..1".equalsIgnoreCase(ccCode)){
UISelectItem addChild1 = new UISelectItem();
addChild1.setItemLabel("0..1");
addChild1.setItemValue("0..1");
child.add(addChild1);
UISelectItem addChild2 = new UISelectItem();
addChild2.setItemLabel("1..1");
addChild2.setItemValue("1..1");
child.add(addChild2);
}
Have you posted this question to he ADF forum, here?
I have been writing some basic code for an application I am designing. I have learned the basics and gotten some simple database connection working with RPC calls etc. What I need to do now and am completely lost (as I am traditionally a c# developer with windows forms).
In c# if I wanted a new form I would just create it, and then call the show method.
How does one create multiple pages in GWT, and switch between them?
Thanks in advance,
Chris
The simplest way would be to
Make a new java class (GwtHome.java, GwtHelp.java etc)
Extend these classes by using the Composite class
Make the equivalent of a Master Page and add it to the rootPanel as a class with the appropriate headers, menu, footer and Content Placeholder (Could be any of the AbsolutePanel, VerticalPanel, HorizontalPanel objects provided by the GWT Framework)
By clicking on the menu clear the Placeholder and add the appropriate object of GwtHome, GwtHelp etc.
After getting aquanted with the above procedure, you might want to break up the code in many files using a design pattern as suggested by Andrei.
Simply clear the root panel (RootPanel.get().clear()) and add the widget for your new "page", the same way you added your first one.
If you're using LayoutPanels, do RootLayoutPanel.get().clear() instead.
Look at Activities and Places design pattern: https://developers.google.com/web-toolkit/doc/latest/DevGuideMvpActivitiesAndPlaces
I highly recommend it for a multipage GWT app. It explains pretty well how you create different "views", that are driven by their "activities", and tied to specific "places" (pages) that users can navigate.
Typically you use a LayoutPanel as your "page" container that occupies the entire available browser window. You split this LayoutPanel into 2-3 layers (zones), like top menu, side menu, main area. Each area contains one widget, usually a ScrollPanel, FlowPanel, or HtmlPanel. Then you use different widgets or HTML inside each of these widgets to display whatever you need. You may also create your own composite widgets that you can reuse in different pages.
I have an application where I need to show one specific section of a HTML document within a swing JPanel. The section to be shown depends on what the user is doing at any given time.
I know that JEditorPane can display simple HTML, and in fact in terms of HTML support this is more than enough for my needs. However I don't think I can use this to display only part of the original HTML file.
I thought of putting each section within a div, then hiding all divs with CSS (display: none), and showing only the target section by setting display: block on the section I wanted to show. Unfortunately JEditorPane has limited CSS support and this does not seem to include the "display" attribute.
Before I go and implement something more elaborate, is there any simple way to achieve this goal?
Thanks.
You may try Cobra :
http://lobobrowser.org/cobra.jsp
Override the ViewFactory and replace DIV views. If they should be hidden let them return 0 from getXXXSpan methods.
See for example the section folding related code http://java-sl.com/collapse_area.html
I didn't find a way to do what I wanted relying on the CSS support from the JEditorPane. What I ended up doing is manually parsing the HTML document and splitting it in "fragments" (top-level DIVs representing sections), then displaying each section as required via JEditorPane.setText.
I'm looking to create a horizontal menu in a jsp page - the menu items vary by user but stay consistent over every page in the site for that user apart from the appearance of the active tab. Seems a simple enough problem at first (the appearance is modified using css) but I can't decide where to construct the menu.
Menu code:
<ul>
<li>item1</li>
<li id="active">item2</li>
</ul>`
As I see it there are 3 choices of when to retrieve menu items:
Upon receipt of HTTP Request to any controller for the first time store two arrays in the session - [url1, url2] and [item1, item2]. Then make the all the jsp pages form this into the above code. The jsp would have to know it's url to make against the [url1, url2] array in order to insert the active id.
Create the above html separately in each controller. Since a controller knows it's own url, it's simple to add the active id.
Create above html without any active id, store the html in the session and make either the jsp pages/controllers modify the html string.
None of these seem particularly appetising.
Does anyone have any advice on this?
Since a JSP is where all the HTML belongs, I'd go for option 1, but then with a List<MenuItem> instead of two loose arrays. You can find JSP's own URL by ${pageContext.request.requestURI}. The JSTL functions library should be helpful in determining whether the URL matches.
I want to implement list like "stackoverflow question list" (where each row has multiple items, text, tags, user, time etc) in GWT. What should be most appropriate approach?
I tried using FlowPanel and inside that "HTML elements" so result will be DIVs inside DIV.
But, then CSS is pain.. (unable to set right aligned multiple rows and left aligned user profile image etc)
If I use table then, it GWT does not support row rendering. Need to work on cell, it is again pain.
so, Any suggestions?
(Please exclude GXT or SmartGWT like other heavy weight frameworks, just want to use core GWT. )
Cheers,
The major answer here is 'it depends'.
The general way I try to approach anything with GWT is to come up with an HTML mockup. Once you have a static version of the layout you want, complete with CSS, it's actually quite straightforward to convert this into GWT code. See this article on 'tags first gwt' for well written example.
The point to keep in mind with GWT is that ultimately, the browser is going to have to deal with a DOM structure you build up, so if you can make it correct without GWT, it is far easier to then make it correct with GWT.
Use DockPanel for contents like multiple items, text, tags, user, time etc...Then add the dockpanel to FlexTable.FlexTable will support to add rows.
How About gwt Grid? even that supports text and table.