I am using Primefaces carousel component and I was wondering if it's possible to change the carousel pagination buttons style to be page numbers?
Thanks
What you could do is create a custom renderer (see for example How to sort f:selectItems in each p:selectOneMenu of my application?), and #Override this method:
protected void encodePageLinks(FacesContext context, Carousel carousel, int pageCount) throws IOException {
ResponseWriter writer = context.getResponseWriter();
writer.startElement("div", null);
writer.writeAttribute("class", Carousel.PAGE_LINKS_CONTAINER_CLASS, null);
for (int i = 0; i < pageCount; i++) {
writer.startElement("a", null);
writer.writeAttribute("href", "#", null);
writer.writeAttribute("class", Carousel.PAGE_LINK_CLASS, null);
writer.endElement("a");
}
writer.endElement("div");
}
Add the page number to the outputted links. A part of the style classes of the page links are controlled by the component JavaScript. You could override that as well, but it would be easier to add some custom styling to get rid of the radio button look.
See also:
How do I override default PrimeFaces CSS with custom styles?
Be careful though, as custom renderers make it harder to upgrade. As per this comment on the GitHub ticket you opened, this method may look different in PF 11, or even be gone.
Related
I'm making app with using Xamarin.forms.
You all know regular tabs for Android from Xamarin.forms' TabbedPage is at top.
Because it should be there if it's Native Android app that respect Android UX.
But things are changed now.
Even Google announced new bottom tab bar called "bottom Navigation".
https://github.com/roughike/BottomBar
Many major apps're using bottom tab bar.
But I can't use new Bottom Navigation.
Because my app is base on Xamarin.forms and uses TabbedPage from forms.
It's going to be more complicated if I try to use bottom Navigation.
(I'm making iOS app from forms too)
So Best approach would be moving native Tabs to bottom.
So I found this. (maybe old)
http://envyandroid.com/align-tabhost-at-bottom/
But don't know how to use in Xamarin.Android.
Could you help me?
Had ran the same issue, tried to create a custom TabbedPageRenderer from the code present at GitHub but no luck due to several classes and interfaces scoped as internal. Found a solution, a hacky one though, but seems to work fine in our case.
Simply created a new BottomTabbedPage inheriting from TabbedPage so you can link a new Renderer for Android, then create a new Renderer as follows:
[assembly: ExportRenderer(typeof(BottomTabbedPage), typeof(BottomTabbedPageRenderer))]
namespace My.XForms.Droid.Renderers
{
public class BottomTabbedPageRenderer : TabbedPageRenderer
{
protected override void OnLayout(bool changed, int l, int t, int r, int b)
{
InvertLayoutThroughScale();
base.OnLayout(changed, l, t, r, b);
}
private void InvertLayoutThroughScale()
{
ViewGroup.ScaleY = -1;
TabLayout tabLayout = null;
ViewPager viewPager = null;
for (int i = 0; i < ChildCount; ++i)
{
Android.Views.View view = (Android.Views.View)GetChildAt(i);
if (view is TabLayout) tabLayout = (TabLayout)view;
else if (view is ViewPager) viewPager = (ViewPager)view;
}
tabLayout.ScaleY = viewPager.ScaleY = -1;
viewPager.SetPadding(0, -tabLayout.MeasuredHeight, 0, 0);
}
}
}
Just scaling the page layout and then scaling the children again doesn't make the trick because the original TabbedPageRenderer pads the ViewPager to not to overlap with the TabLayout, so your contained pages would appear with a starting gap so inserting the negative padding fixes that.
Not an ideal solution, just works, but at least you don't run through a full TabbedPage implementation.
Use BottomNavigationBarXF NuGet package for Xamarin Forms.
The result:
In a MvvmCross app, I have a page with the classic chat behavior (WhatsApp like): this page shows the history of messages exchanged between two users with the last message at the bottom of the list.
I've successfully implemented the view in Windows Phone 8.1, but I'm struggling with a problem in Android.
I'll give you a short introduction and description of my problem and next I'll go through technical details.
INTRODUCTION
Actually, my need is to apply different style to messages sent by different users: tipically align left messages sent from other user and align right messages sent by me (I do this through the weight property); I need to apply a different drawable background and set different gravity property also.
I use custom binding because, AFAIK, those properties cannot be binded with classic binding: local:MvxBind="Gravity MyPropery" doesn't work because there is no Gravity property.
So, I have of course two axml files:
the first one contains the Mvx.MvxListView
the second one contains the item template for MvxListView
And I've created three different custombinding (for Background, Gravity and Weight) following these guides:
http://slodge.blogspot.it/2013/06/n28-custom-bindings-n1-days-of-mvvmcross.html
In MvvmCross how do I do custom bind properties
THE PROBLEM
I want that, when a user opens the chat View, the list widget shows automatically the last message. To accomplish this, I scroll programmatically the list to the last message and this seems to be the problem.
If I don't scroll programmatically, when I open the page and scroll manually to the end of the page, all custom bindings are applied successfully: I can see messages aligned right and left, with correct background and weight applied.
If I force the scroll programmatically, when I open the page I see a strange behavior: all the messages are present (classic binding, such as Text property, have been successfully applied), but custom bindings are missing. All the messages have the same background and are all left aligned.
BUT, if I scroll manually up and down, the custom binding are processed and the messages are displayed with right style.
DEBUG ANALYSIS
To debug the behaviour I've put a simple static counter in a custom binding procedure to track every time the function is processed.
public class LinearLayoutWeightTargetBinding : MvxAndroidTargetBinding
{
public static int debugCounter = 0;
public LinearLayoutWeightTargetBinding(object target) : base(target)
{
}
protected LinearLayout MyTarget
{
get { return (LinearLayout)Target; }
}
public override Type TargetType { get { return typeof(bool); } }
protected override void SetValueImpl(object target, object value)
{
var ll = (LinearLayout)target;
var itsMe = (bool)value;
var weight = itsMe ? (float)20.0 : (float)5.0;
var layoutParams = new LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.WrapContent, weight);
ll.LayoutParameters = layoutParams;
Log.Debug("MeeCHAT", string.Format("LinearLayoutWeightTargetBinding::SetValueImpl::ItsMe:{0} - counter:{1}", itsMe, ++debugCounter));
}
public override MvxBindingMode DefaultMode { get {return MvxBindingMode.TwoWay;} }
}
By this way I saw that actually by scrolling up and down the custom bindings are applied (debugCounter increases correctly).
BUT when I apply the programmatically scroll, only the first 10 items are processed by the custom bindings and this seems the reason why I see the messages without the right style. Because I have a long list, only the first 10 items are processed but they are not visible (they are out of the visible area) and the visibile items have not been processed.
TECHNICAL DETAILS
Here are some details related to technical aspects of my app. I try to give you all important aspects.
ORGANIZATION OF THE VIEWS
By following the approach described by Greg Shackles in this article http://gregshackles.com/presenters-in-mvvmcross-navigating-android-with-fragments/ I have just one general Activity for the app and one Fragment for each View; then through a Presenter is possible to activate the right ViewModel and manage the stack of the navigation.
The Fragment for the View where I have the Mvx.MvxListView widget is
public class MyMatchersChatView : MvxFragment
{
public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
var ignore = base.OnCreateView(inflater, container, savedInstanceState);
var result = this.BindingInflate(Resource.Layout.MyMatchersChatView, null);
var headerFrame = result.FindViewById<FrameLayout>(Resource.Id.headerFrameMyMatchersChatView);
var headerWidget = new HeaderWidget() { ViewModel = this.ViewModel };
var tran = ChildFragmentManager.BeginTransaction();
tran.Add(headerFrame.Id, headerWidget, "headerMyMatchersChat");
tran.Commit();
var listView = result.FindViewById<MvxListView>(Resource.Id.messagesList);
listView.SetSelection(listView.Adapter.Count - 1); // Scroll to the end of the list
return result;
}
}
The statement listView.SetSelection(listView.Adapter.Count - 1); force the list to scroll to the end.
Last two things: how the custom bindings are registered and how are applied in axml file.
REGISTRATION OF CUSTOM BINDING
In Setup.cs I have:
protected override void FillTargetFactories(IMvxTargetBindingFactoryRegistry registry)
{
base.FillTargetFactories(registry);
registry.RegisterFactory(new MvxCustomBindingFactory<LinearLayout>("CustomWeight",
(b) => new LinearLayoutWeightTargetBinding(b)));
}
APPLYING OF CUSTOM BINDING
In my axml I have:
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_height="wrap_content"
local:MvxBind="CustomWeight IsCurrentUser">
LISTVIEW AND VIEWMODEL
Here is the code of ListView
<Mvx.MvxListView
android:id="#+id/messagesList"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
local:MvxBind="ItemsSource MyMessages"
local:MvxItemTemplate="#layout/mymatcherschatview_itemtemplate" />
and the property in ViewModel
private IEnumerable<MyMatchMessageModel> _myMessages;
public IEnumerable<MyMatchMessageModel> MyMessages
{
get { return _myMessages; }
set
{
_myMessages = value;
RaisePropertyChanged(() => MyMessages);
}
}
ENVIRONMENT
Finally, here is my environment:
Visual Studio 2015
MvvmCross 3.5.1
Core targets: .NET Framework 4.5, Windows 8, ASP.NET Core 5.0, Windows Phone 8.1, Xamarin.Android, Xamarin.iOS, Xamarin.iOS (Classic)
The Android app target is API Level 19 (Xamarin.Android v4.4 Support)
Xamarin 3.11.1450.0
Xamarin.Android 5.1.6.7
Someone can help me to understand if I'm doing something wrong?
Thanks for reading and for any help!
>>EDIT 1<<
I've changed my layout by adding stackFromBottom and transcriptMode properties and by removing the scrolling to below programmatically in Fragment obtaining an auto-scroll behavior, but the problem still remains: to see messages with correct style I have to manually scroll up and down (to activate the custom bindings)
Here is the new axml...
<Mvx.MvxListView
android:id="#+id/messagesList"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stackFromBottom="true"
android:transcriptMode="alwaysScroll"
local:MvxBind="ItemsSource MyMessages"
local:MvxItemTemplate="#layout/mymatcherschatview_itemtemplate" />
...and the new code in Fragment
public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
var ignore = base.OnCreateView(inflater, container, savedInstanceState);
var result = this.BindingInflate(Resource.Layout.MyMatchersChatView, null);
var headerFrame = result.FindViewById<FrameLayout>(Resource.Id.headerFrameMyMatchersChatView);
var headerWidget = new HeaderWidget() { ViewModel = this.ViewModel };
var tran = ChildFragmentManager.BeginTransaction();
tran.Add(headerFrame.Id, headerWidget, "headerMyMatchersChat");
tran.Commit();
return result;
}
First thing I would do is to make sure that your custom binding is always getting called.
Set a breakpoint on the SetValueImpl() method and check it´s getting called on those problematic items. If that happens, then the issue relies on the view no getting updated for any reason and you should work on that. If it doesn´t break, you will know for sure it´s a custom binding problem (possibly a bug) in MvxAdapter.
If you find out it´s the second one. I would suggest getting rid of your custom binding and creating your own ChatListAdapter : MvxAdapter as follows:
public class CoolChatListAdapter : MvxAdapter
{
public CoolChatListAdapter(Context context, IMvxAndroidBindingContext bindingContext) : base(context, bindingContext)
{
}
protected override View GetBindableView(View convertView, object source, int templateId)
{
var item = source as MyMatchMessageModel;
var weight = item.IsCurrentUser ? (float) 20.0 : (float) 5.0;
var ll = (LinearLayout) convertView;
var layoutParams = new LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.WrapContent, weight);
ll.LayoutParameters = layoutParams;
return base.GetBindableView(convertView, source, templateId);
}
}
Then, in your android view:
var adapter = new ChatListAdapter(this, (IMvxAndroidBindingContext)BindingContext);
_chatList = FindViewById<MvxListView>(Resource.Id.chat_list_view);
_chatList.Adapter = adapter;
I have a common shape that renders some HTML code to display an error dialog.
The HTML code needs to be included only once throughout the whole web site. For scripts and styles Orchard provides the Script.Include() and Style.Include() methods.
I wonder whether there is something similar for HTML code, any ideas?
So many options to do this
Can you add your code to Layout.cshtml in the theme
Create a new widget and attach the shape field then create it on the default layer (so on all pages) with the name of your shape in the shape field
Add the shape in a filter, or anywhere else you have access to the WorkContext :)
Code written from memory, may not compile
using System.Linq;
using System.Web.Mvc;
using Orchard;
using Orchard.DisplayManagement;
using Orchard.Mvc.Filters;
using Orchard.UI.Admin;
public class MyFilter : FilterProvider, IResultProvider {
private readonly dynamic _shapeFactory;
private readonly WorkContext _workContext;
public MyFilter(WorkContext workContext, IShapeFactory shapeFactory)
{
_workContext = workContext;
_shapeFactory = shapeFactory;
}
public void OnResultExecuting(ResultExecutingContext filterContext)
{
// should only run on a full view rendering result
if (!(filterContext.Result is ViewResult)) return;
// front end only
if (AdminFilter.IsApplied(new RequestContext(_workContext.HttpContext, new RouteData()))) return;
var body = _workContext.Layout.Body;
body.Add(_shapeFactory.MyShape());
}
public void OnResultExecuted(ResultExecutedContext filterContext) {}
}
I'm using the new toolbar widget introduced in the appcompat / support-v7. I would like to hide/show the toolbar depending on if the user is scrolling up/down the page, just like in the new Google's playstore app or NewsStand app. Is there something built into the toolbar widget for this or should I be using it in conjunction with FrameLayout and ObservableScrollView?
As far as I know there is nothing build in that does this for you. However you could have a look at the Google IO sourcecode, especially the BaseActivity. Search for "auto hide" or look at onMainContentScrolled
In order to hide the Toolbar your can just do something like this:
toolbar.animate().translationY(-toolbar.getBottom()).setInterpolator(new AccelerateInterpolator()).start();
If you want to show it again you call:
toolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator()).start();
For hiding the toolbar you can just do :
getSupportActionBar().hide();
So you just have to had a scroll listener and hide the toolbar when the user scroll !
Hide:
getSupportActionBar().hide();
Show:
getSupportActionBar().show();
The answer is straightforward. Just implement OnScrollListenerand hide/show your toolbar in the listener. For example, if you have listview/recyclerview/gridview, then follow the example.
In your MainActivity Oncreate method, initialize the toolbar.
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
if (toolbar != null) {
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
}
}
And then implement the OnScrollListener
public RecyclerView.OnScrollListener onScrollListener = new RecyclerView.OnScrollListener() {
boolean hideToolBar = false;
#Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
if (hideToolBar) {
((ActionBarActivity)getActivity()).getSupportActionBar().hide();
} else {
((ActionBarActivity)getActivity()).getSupportActionBar().show();
}
}
#Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
if (dy > 20) {
hideToolBar = true;
} else if (dy < -5) {
hideToolBar = false;
}
}
};
I got the idea from: https://stackoverflow.com/a/27063901/1079773
Android Design Support Library can be used to show/hide toolbar.
See this.
http://android-developers.blogspot.kr/2015/05/android-design-support-library.html
And there are detail samples here.
http://inthecheesefactory.com/blog/android-design-support-library-codelab/en
There are actually quite a number of ways to hide/show the toolbar while you are scrolling the content. One of the ways is to do it via the Android Design Support Library or more specifically the Coordinator layout aka. super-powered frame layout.
Basically all you need to do is to have the following structure in your layout file and you should be able to achieve the result that you want.
<CoordinatorLayout>
<AppBarLayout>
</AppBarLayout>
<NestedScrollView>
</NestedScrollView>
</CoordinatorLayout>
I have actually made a video to explain how it can be done in a step by step manner. Feel free to check it out and let me know if it helps. Thanks! :)
https://youtu.be/mEGEVeZK7Nw
Just add this property inside your toolbar and its done
app:layout_scrollFlags="scroll|enterAlways"
Isn't is awesome
I've been trying to implement the same behavior, here is the brunt of code showing and hiding the toolbar (put in whatever class containing your RecyclerView):
int toolbarMarginOffset = 0
private int dp(int inPixels){
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, inPixels, getApplicationContext().getResources().getDisplayMetrics());
}
public RecyclerView.OnScrollListener onScrollListenerToolbarHide = new RecyclerView.OnScrollListener() {
#Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
toolbarMarginOffset += dy;
if(toolbarMarginOffset>dp(48)){
toolbarMarginOffset = dp(48);
}
if(toolbarMarginOffset<0){
toolbarMarginOffset = 0;
}
ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams)toolbar.getLayoutParams();
params.topMargin = -1*toolbarMarginOffset;
toolbar.setLayoutParams(params);
}
};
I've included the dp function to convert from pixels to dp but obviously set it to whatever your toolbar height is. (replace dp(48) with your toolbar height)
Where-ever you setup your RecyclerView include this:
yourListView.setOnScrollListener(onScrollListenerToolbarHide);
However, there are a couple additional issues if you are also using a SwipeRefreshLayout.
I've had to set the marginTop of the first element in the adapter for the RecyclerView to the Toolbar's height plus original offset. (A bit of a hack I know). The reason for this is I found that if I changed my above code to include changing the marginTop of the recyclerView while scrolling it was a jittery experience. So that's how I overcame it. So basically setup your layout so that your toolbar is floating on top of the RecyclerView (clipping it) Something like this (in onBindViewHolder of your custom RecyclerView adapter) :
if(position==0){
ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams)holder.card.getLayoutParams();
// params.height = ViewGroup.LayoutParams.WRAP_CONTENT;
params.topMargin = dp(10+48);
}
And lastly, since there is a large offset the RecyclerViews refresh circle will be clipped, so you'll need to offset it (back in onCreate of your class holding your RecyclerView):
swipeLayout.setProgressViewOffset(true,dp(48),dp(96));
I hope this helps someone. Its my first detailed answer so I hope I was detailed enough.
To hide the menu for a particular fragment:
setHasOptionsMenu(true); //Inside of onCreate in FRAGMENT:
#Override
public void onPrepareOptionsMenu(Menu menu) {
menu.findItem(R.id.action_search).setVisible(false);
}
I implemented a utility class to do the whole hide/show Toolbar animation when scrolling. You can see the article here http://rylexr.tinbytes.com/2015/04/27/how-to-hideshow-android-toolbar-when-scrolling-google-play-musics-behavior/. Source code is here https://github.com/rylexr/android-show-hide-toolbar.
A library and demo with the complete source code for scrolling toolbars or any type of header can be downloaded here:
https://github.com/JohannBlake/JBHeaderScroll
Headers can be Toolbars, LinearLayouts, RelativeLayouts, or whatever type of view you use to create a header.
The scrollable area can be any type of scroll content including ListView, ScrollView, WebView, RecyclerView, RelativeLayout, LinearLayout or whatever you want.
There's even support for nested headers.
It is indeed a complex undertaking to synchronize headers (toolbars) and scrollable content the way it's done in Google Newsstand.
This library doesn't require implementing any kind of onScrollListener.
The solutions listed above by others are only half baked solutions that don't take into consideration that the top edge of the scrollable content area beneath the toolbar has to initially be aligned to the bottom edge of the toolbar and then during scrolling the content area needs to be repositioned and possibly resized. The JBHeaderScroll handles all these issues.
There is an Android library called Android Design Support Library that's a handy library where you can find of all of those Material fancy design things that the Material documentation presents without telling you how to do them.
It's well presented in this Android Blog post. The "Collapsing Toolbar" in particular is what you're looking for.
I'm trying to create a titled border frame in GWT, which results in this:
This can be done using HTML fieldset and legend tags, such as
<fieldset>
<legend>Connection parameters</legend>
... the rest ...
</fieldset>
I want to create a custom widget in GWT that implements that. I managed to do that, but the problem is that events that happen inside the widget (button click etc) does not get fired although I have added the handler.
My implementation of the widget is as follows:
public class TitledPanel extends Widget {
private Element legend;
private Widget content = null;
public TitledPanel() {
Element fieldset = DOM.createFieldSet();
legend = DOM.createLegend();
DOM.appendChild(fieldset, legend);
setElement(fieldset);
}
public TitledPanel(String title) {
this();
setTitle(title);
}
#Override
public String getTitle() {
return DOM.getInnerHTML(legend);
}
#Override
public void setTitle(String html) {
DOM.setInnerHTML(legend, html);
}
public Widget getContent() {
return content;
}
public void setContent(Widget content) {
if (this.content != null) {
DOM.removeChild(getElement(), this.content.getElement());
}
this.content = content;
DOM.appendChild(getElement(), content.getElement());
}
}
Do I need to extend Composite, or need to manually reroute the events, or is there other ways?
I think you're looking for CaptionPanel:
A panel that wraps its contents in a border with a caption that appears in the upper left corner of the border. This is an implementation of the fieldset HTML element.
I think the problem here is that you just call DOM.appendChild - this doesn't cause the TitledPanel to adopt the Widget. The normal course of action is that you extend Composite and then call initWidget(Widget widget) - inside the hood it calls widget.setParent(this);, which in turn makes the parent adopt this widget and attach it to the browser's document. However com.google.gwt.user.client.ui.Widget.setParent(Widget) is only package-visible so you can't call it from your code (after, for example, DOM.appendChild).
I'd recommend reading Widget Best Practices / Widget Building, especially the Clean up after yourself and/or look at the source code for some GWT Widgets, to get the idea how the GWT sees custom widget creation.
And, as Robert suggested, CaptionPanel is the safer route :)