I'm working with a wizard component. The navbar is in the botton but my boss wants me to put it in the top of the wizard,I thought that it was an attribute or tag to do it straight forward but I have been reviewing the documentation and I should be wrong (I only found the showNavBar tag).
Is there a way to do it without css or jquery? (we have some problems in the application setting css when working with some components so I would like to avoid it).
Thank you very much
You can achieve this in either of the two ways:
1 - Extending the WizardRenderer
By extending the WizradRenderer you can change the order of the encoding.
In the original Renderer the encodeContent(facesContext, wizard); is called before encodeNavigators(facesContext, wizard); so it's pretty much simple, extend you custom renderer, change the order of the calls.
public class ExNavWizardRenderer extends org.primefaces.component.wizard.WizardRenderer{
#Override
protected void encodeMarkup(FacesContext facesContext, Wizard wizard) throws IOException {
ResponseWriter writer = facesContext.getResponseWriter();
String clientId = wizard.getClientId(facesContext);
String styleClass = wizard.getStyleClass() == null ? "ui-wizard ui-widget" : "ui-wizard ui-widget " + wizard.getStyleClass();
writer.startElement("div", wizard);
writer.writeAttribute("id", clientId, "id");
writer.writeAttribute("class", styleClass, "styleClass");
if(wizard.getStyle() != null) {
writer.writeAttribute("style", wizard.getStyle(), "style");
}
if(wizard.isShowStepStatus()) {
encodeStepStatus(facesContext, wizard);
}
// encode the navigators before the content
if(wizard.isShowNavBar()) {
encodeNavigators(facesContext, wizard);
}
encodeContent(facesContext, wizard);
writer.endElement("div");
}
}
Update your faces-config.xml
<render-kit>
<renderer>
<component-family>org.primefaces.component</component-family>
<renderer-type>org.primefaces.component.WizardRenderer</renderer-type>
<renderer-class>com.projectPackage.ExNavWizardRenderer</renderer-class>
</renderer>
</render-kit>
2 - jQuery
In your document.ready you can change the DOM, for example this would do the same as the Renderer:
$('.ui-wizard-step-titles').after($('.ui-wizard-navbar'))
Related
Since JavaFX libraries does not have the method HTML.fromHtml as android does, I try to find a solution for that.
I've got a TableView with a TableColumn which shows a simple html tagged string. The substring between the tags should be painted in a specific color. How can I achieve that?
colConstruction.setCellFactory(param -> new TableCell<GrammarData, String>() {
#Override
public void updateItem(String item, boolean empty) {
super.updateItem(item, empty);
String sampleString = "<c1>A<ce> is a charackter, <c2>B<ce> too."
this.setText(sampleString);
}
});
E.g. A shall be red, B shall be blue. (I replaced the html tags)
Similar questions were only about coloring the whole cell text, but not parts of it.
I also tried:
Text text = new Text(sampleString);
text.setFill(Color.RED);
this.setText(text.toString());
Although it would have been worked, I then couldn't use different colors.
Edit:
The Tags <c1>, <c2>, <c... > are going to be replaced by <font color='#FFFFFF'>, depending on the given number. <ce> is going to be replaced by </font>. Since I use the same data for android and I need to have dynamically choosen colors, I use those patterns.
Solution:
Using a WebView element inside of the cell fixed this issue.
colConstruction.setCellFactory(param -> new TableCell<GrammarData, String>() {
#Override
public void updateItem(String item, boolean empty) {
super.updateItem(item, empty);
if (item != null) {
WebView view = new WebView();
view.setPrefSize(650, 80);
WebEngine engine = view.getEngine();
setGraphic(view);
engine.loadContent(item.replace("<c1>", "<font color='#F9193E'>")
.replace("<c2>", "<font color='#0AD2F5'>")
.replace("<c3>", "<font color='#96F023'>")
.replace("<ce>", "</font>"));
}
}
});
You just have to care about the size of the WebView.
I have tried to search both the forum and Google extensively, but I have problems understanding how I should make this work:
PrimeFaces6
I have a BarchartModel based on the tutorial in the ShowCase:
CODE: SELECT ALL
private BarChartModel initStatusBarChart() {
BarChartModel model = new BarChartModel();
ChartSeries statusMessages = new ChartSeries();
statusMessages.setLabel("Label"));
statusMessages.set("Some String 1", list1.size());
statusMessages.set("Some String 2", list2.size());
model.addSeries(statusMessages);
return model;
}
The issue is that on render, I get tooltips the format of
"1, 515" and "2, 432", where 515 and 432 are the sizes of list1 and list2, respectively.
How can I replace 1 and 2 with the values "Some String" 1 and 2 ? Have tried extending highlighter and using dataTipFormat, with no success.
I solved the problem using the datatip editor of the chart model (with Primefaces 6.1, by the way). I used this for a stacked bar chart.
I needed to apply this solution at two places: the backing bean and the JSF page.
In the backing bean I had to set a JavaScript function name this way:
barModel.setDatatipEditor("chartDatatipEditor");
I tried to set it using the corresponding tag attribute in the JSF page but to no effect.
In the JSF I inserted this JavaScript code:
<script type="text/javascript">
function chartDatatipEditor(str, seriesIndex, pointIndex, plot) {
//console.log('chartDatatipEditor: '+str+" - "+seriesIndex+" - "+pointIndex);
var point = seriesIndex+','+pointIndex;
#{bean.datatipsJs}
}
</script>
This JS function gets the chart coordinates as parameters. I concat them so that the following JS code gets easier.
seriesIndex is the index of the chart series. pointIndex is the index on the X scale of the diagram.
To find out what are the correct values for your chart you can uncomment the console.log line above.
The inserted JS code is constructed in the backing bean this way:
private Map<String, String> chartDatatips;
public String getDatatipsJs() {
StringBuilder sb = new StringBuilder("switch ( point ) {\n");
for (String point : chartDatatips.keySet()) {
sb.append("case '").append(point).append("': return '").append(chartDatatips.get(point)).append("'; break;\n");
}
sb.append("default: return 'Unknown point'; break; }");
return sb.toString();
}
The map chartDatatips has the coordinate point as key (e.g., "2,1") and the tooltip as value.
During the chart setup you obviously have to fill this map with useful details ;-)
Like this:
chartDatatips.put("2,5", "Label ...");
...
Hope this helps, if you didn't already solved this.
~Alex
Based on Alex's answer I have come up with this. Only requiring javascript - it displays the label and value:
In the backing bean, set a JavaScript function name this way:
barModel.setDatatipEditor("chartDatatipEditor");
In the HTML file:
function chartDatatipEditor(str, seriesIndex, pointIndex, plot) {
return plot.series[seriesIndex].label + ' - ' + plot.data[seriesIndex][pointIndex];
}
Is there any way to remove tabs from an MvxTabsFragmentActivity-inherited class? I mean, currently there's only AddTab<T>() method for adding tabs. But, what if I want to remove tabs?
TIA,
Pap
No - MvxTabsFragmentActivity doesn't provide any RemoveTab functionality currently.
The source for this activity is https://github.com/MvvmCross/MvvmCross/blob/v3.1/Cirrious/Cirrious.MvvmCross.Droid.Fragging/MvxTabsFragmentActivity.cs - you should be able to use this as a starting point for your own needs.
UPDATE:
After following #Stuart's advice and-as I mentioned in my comment below-I added the source code for the MvxTabsFragmentActivity class to my project and added the following method-to remove all tabs-which was all I wanted:
public void RemoveAllTabs()
{
// First, detach the curent tab using SupportFragmentManager object.
if (_currentTab != null)
{
var tag = _currentTab.CachedFragment.Tag;
_currentTab.CachedFragment = SupportFragmentManager.FindFragmentByTag( tag );
if (_currentTab.CachedFragment != null && !_currentTab.CachedFragment.IsDetached)
{
var ft = SupportFragmentManager.BeginTransaction();
ft.Detach( _currentTab.CachedFragment );
ft.Commit();
SupportFragmentManager.ExecutePendingTransactions();
}
}
// Second remove all tabs from TabHost object
if (_tabHost != null)
_tabHost.ClearAllTabs();
// And lastly, empty our _lookup table(actually a Dictionary).
_lookup.Clear();
_currentTab = null; // Clear the current tab
}
I guess if someone wanted to have a specific tab removed he could use the SupportFragmentManager object and have something like this:
public void RemoveTab( string tag )
{
var fragment = SupportFragmentManager.FindFragmentByTag( tag );
if (fragment != null && ! fragment.IsDetached)
{
var ft = SupportFragmentManager.BeginTransaction();
ft.Detach( fragment );
ft.Commit();
SupportFragmentManager.ExecutePendingTransactions();
//_tabHost.TabWidget.RemoveView( fragment.View ); // Neither this..
//_tabHost.RemoveView( fragment.View ); // .. or this removed the tab from the Tabhost.
}
}
However, although the above code was successful at removing the fragment/view inside the tab, the tab itself remained-showing a blank/empty tab. I couldn't find a TabHost.RemoveTab() or TabHost.TabWidget.RemoveTab() methods and the TabHost.RemoveView()/TabHost.TabWidget.RemoveView() did not work.
Notes: I renamed the MvxTabsFragmentActivity to something else and included all copyright notices at the top of the class in my project. Thanks again to #Stuart.
I am starting to implement MVVM in my application and got an issue of knowing when the user navigated to the view.
To navigate between views, I can just use the navigationService.Navigate(...);
How do I check when I navigated to the view?
May I use the event navigationService.Navigated?
Is there no other method I can use like OnNavigatedTo that the page itself provide?
XAML:
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP71"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
DataContext="{Binding titleSearchViewModel, Source={StaticResource Locator}}">
<i:Interaction.Triggers>
<i:EventTrigger>
<cmd:EventToCommand Command="{Binding PageLoaded, Mode=OneWay}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
VM:
private RelayCommand _PageLoaded;
public RelayCommand PageLoaded
{
get
{
if (_PageLoaded == null)
{
_PageLoaded = new RelayCommand(
() => Loaded()
);
}
return _PageLoaded;
}
}
In case this question is still actual, i prefer this solution: http://www.geoffhudik.com/tech/2010/10/10/another-wp7-navigation-approach-with-mvvm.html
If to use it, it is possible to send recipient ViewModel's parameters from the sender ViewModel:
SendNavigationMessage(Settings.NAVIGATION_PRODUCTS_SUBCATEGORIES,
new Dictionary<string, object> { { "SelectedIndex", Int32.Parse(item.id) } });
And receiver should define in xaml:
NavigatedToCommand="{Binding RefreshCommand}"
And then in receiver ViewModel:
public ICommand RefreshCommand // Should be set as NavigatedToCommand="{Binding RefreshCommand}" in xaml
{
get { return new RelayCommand(Refresh); }
}
public void Refresh()
{
_dataService.GetList(SelectedIndex, DownloadedCallback); // So, this would be called automatically after navigating is complete. SelectedIndex is updated at this moment.
}
Thanks for the answers provided. Both were helpful over a period of time until I decided to create a custom implementation of the navigation service that has been created by a few people.
I then made a contribution to the Cimbalino toolkit to suggest this and it has been introduced a while back.
I my personal opinion, that solves my issue the best. Have a look at the navigation service in there. The Navigated event pretty much solves my issue I had.
https://github.com/Cimbalino/Cimbalino-Toolkit
It basically comes down to this (in your viewmodel):
_navigationService.Navigated += OnNavigated;
I am trying to access the CurrentUser property of the NancyContext. How do I do this from within the html of a Razor view?
I would be grateful for a code snippet if possible.
Thanks
Edit
I now extend Nancy.ViewEngines.Razor.HtmlHelpers to give me cross-view data with syntactic sugar that keeps the view code terse and readable.
Here are a few examples:
public static bool IsRegistered<T>(this HtmlHelpers<T> html)
{
var user = GetUser(html);
return user != null && user.IsRegistered;
}
public static bool IsAuthenticated<T>(this HtmlHelpers<T> html)
{
return GetUser(html) != null;
}
public static User GetUser<T>(this HtmlHelpers<T> html)
{
return (User)html.RenderContext.Context.CurrentUser;
}
And some razor code from a view. Here I am deciding to include the html for a Sign In popup (Foundation Reveal) only if the user is not currently authenticated - makes sense.
#if (!Html.IsAuthenticated())
{
Html.Partial("Reveals/SignInReveal");
}
You can access the NancyContext through the Html property's RenderContext property.
A sample usage:
#inherits Nancy.ViewEngines.Razor.NancyRazorViewBase<dynamic>
<p>Current User: #Html.RenderContext.Context.CurrentUser </p>
However if your are using the SuperSimpleViewEngine (thanks the comment to #Sean) then you can do similar using the
#Context.CurrentUser.UserName