I`m working with react-redux, is it possible to split a react-bootstrap component to 2 components (parent-child)?
for example:
//parent Tabs_component
return (
<Tabs defaultActiveKey={1}>
<Tab_component />
</Tabs>
)
// child Tab_component
return (
<div>
<Tab eventKey={1} title="Tab 1">Tab 1 content</Tab>
<Tab eventKey={2} title="Tab 2">Tab 2 content</Tab>
<Tab eventKey={3} title="Tab 3">Tab 3 content</Tab>
</div>
)
Related
I bought this template and i want to use Command or Clicked event on tab section. When I clicked the tab it goes to the page but page created at once while program is on but i want to make control each time when page created. How can i use Command or Clicked event on tabbar.
<Tab Title="{x:Static res:AppResources.Home}" Route="home" >
<Tab.Icon>
<FontImageSource FontFamily="MaterialOutlined" Glyph="{x:Static md:Icons.Home}" />
</Tab.Icon>
<ShellContent ContentTemplate="{DataTemplate views:HomePage}" />
</Tab>
<Tab Title="{x:Static res:AppResources.Cart}" Route="cart" >
<Tab.Icon>
<FontImageSource FontFamily="MaterialOutlined" Glyph="{x:Static md:Icons.ShoppingCart}" />
</Tab.Icon>
<ShellContent ContentTemplate="{DataTemplate views:CartPage}" />
</Tab>
<Tab Title="{x:Static res:AppResources.MyAccount}" Route="myaccount">
<Tab.Icon>
<FontImageSource FontFamily="MaterialOutlined" Glyph="{x:Static md:Icons.Person}" />
</Tab.Icon>
<ShellContent ContentTemplate="{DataTemplate views:LoginPage}" />
</Tab>
</TabBar>
You can try to add a property changed event to the tabbar. Such as:
private void TabBar_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
var tabbar = sender as TabBar;
if(tabbar.CurrentItem.TabIndex == 0)
{
}else if (tabbar.CurrentItem.TabIndex == 1)
{
}
}
In the shell.xaml:
<TabBar PropertyChanged="TabBar_PropertyChanged">
I put a lot of effort into research, but I can't not solve my issue.
What I want to achieve:
I would like to use Xamarin Shell Navigation and hide the Top Navigation Tabs (not title bar --> called "navbar", not "tabbar"). Watch out for the image and the orange marked section.
Shell.TabBarIsVisible="False" hides Bottom "TabBar" ("Tab 1", "Tab 2", "Tab 3")
Shell.NavBarIsVisible="False" hides Title Bar ("Page 1 Full Title")
Nothing hides the Top Navigation Tabs below that Title Bar
That is my structure:
<Shell>
<TabBar x:Name="RootTab">
<Tab
Title="Tab1" >
<ShellContent
Route="page1"
Title="page1"
ContentTemplate="{DataTemplate view:Page1}" />
<ShellContent
Route="page2"
Title="page2"
ContentTemplate="{DataTemplate view:Page2}" />
<ShellContent
Route="page3"
Title="page3"
ContentTemplate="{DataTemplate view:Page3}" />
<ShellContent
Route="page4"
Title="page4"
ContentTemplate="{DataTemplate view:Page4}" />
</Tab>
<Tab
Title="Tab2" >
<ShellContent
Route="tab2"
Title="tab2"
ContentTemplate="{DataTemplate view:Tab2Page}" />
</Tab>
<Tab
Title="Tab3" >
<ShellContent
Route="tab3"
Title="tab3"
ContentTemplate="{DataTemplate view:Tab3Page}" />
</Tab>
</TabBar>
</Shell>
What i tried?
IsTabStop
Just placing 1 starting ShellContent (Page 1) in Tab 1 and then manually adding/removing pages (2, 3, 4) via code. That works fine for android. But iOS is showing just a black page after adding the new page and removing the old page from Tab 1.
Placing ShellContents outside of TabBar. But then I loose my TabBar...
Shell Image: https://i.stack.imgur.com/WYugb.png
UPDATE:
This works in Android but not in iOS (black page):
Having only one ShellContent in XAML and adding other manually in Code
AppShell.mytab.Items.Add(shell1);
AppShell.mytab.Items.Remove(shell0);
When I add the this line in the middle:
Shell.Current.CurrentItem.Items[0].CurrentItem = shell1; (Items[0] means first tab of TabBar --> "Tab 1")
It looks like it works, hurray! and showing the next page but it produces an error:
System.NullReferenceException: 'Object reference not set to an instance of an object'
ShellSectionRootRenderer.cs:201
Seems like https://github.com/xamarin/Xamarin.Forms/issues/5428
and https://github.com/xamarin/Xamarin.Forms/pull/10500
Other thread missing IsVisible option https://github.com/xamarin/Xamarin.Forms/issues/5232
IsVisible was planned but removed because of naming issues
https://github.com/xamarin/Xamarin.Forms/pull/9023
UPDATE 2!
TODAYs Update/Release from Xamarin.Forms 4.5.0.657 to 4.6.0.726 solved the issue. Adding and removing is no working fine in iOS!
https://github.com/xamarin/Xamarin.Forms/pull/10500
Xamarin.Forms 4.6 Branch: Latest commit 18 hours ago
You could remain only first contentpage inside Tab in AppShell .
<TabBar x:Name="RootTab">
<Tab Title="Tab1">
<ShellContent
Route="page1"
Title="page1"
ContentTemplate="{DataTemplate view:Page1}" />
</Tab>
<Tab
Title="Tab2" >
<ShellContent
Route="tab2"
Title="tab2"
ContentTemplate="{DataTemplate view:Tab2Page}" />
</Tab>
<Tab
Title="Tab3" >
<ShellContent
Route="tab3"
Title="tab3"
ContentTemplate="{DataTemplate view:Tab3Page}" />
</Tab>
</TabBar>
And navigate between pages using old ways
// your "wizard"
await Navigation.PushAsync(new Page2());
Update
If you want hide the back button , add a transparent image into project ,and set in xaml
<Shell.BackButtonBehavior>
<BackButtonBehavior IconOverride="transparent.png" IsEnabled="False"/>
</Shell.BackButtonBehavior>
Upgrading to Xamarin 4.6 fixed the bug / problem.
Here is my code / solution.
AppShell.xaml
<TabBar Route="tabBar">
<Tab
x:Name="myTab"
Route="tab1"
Icon="tab_icon1.png">
<ShellContent
x:Name="shellStart"
Route="route1A"
Title="title"
ContentTemplate="{DataTemplate view:Page1A}" />
</Tab>
<Tab
Route="tab2"
Icon="tab_icon2.png">
<ShellContent
Route="route2"
Title="title2"
ContentTemplate="{DataTemplate view:Page2}" />
</Tab>
</Tab>
<Tab
Route="tab3"
Icon="tab_icon3.png">
<ShellContent
Route="route3"
Title="title3"
ContentTemplate="{DataTemplate view:Page3}" />
</Tab>
</TabBar>
AppShell.xaml.cs
public ShellContent shell0;
public ShellContent shell1;
public ShellContent shell2;
public ShellContent shell3;
public static Tab tabLocal;
constructor
tabLocal = myTab;
shell0 = shellStart;
shell1 = new ShellContent()
{
Content = new Page1B(),
Title = "",
Route = ""
};
shell2 = .... Page1C() ...
shell3 = .... Page1D() ...
...
Switching page 0 to 1
AppShell.tabLocal.Items.Add(shell1);
AppShell.tabLocal.Items.Remove(shell0);
Maybe these two method for handling the navigation is useful
protected async override void OnNavigating(ShellNavigatingEventArgs args)
protected override void OnNavigated(ShellNavigatedEventArgs args)
I have a react component laying out a grid of other components within a tab pane, all from react-bootstrap and contained within a div that has bootstrap's nice centred, padded container going on. Unfortunately the Grid within the Tab seems to think it should extend all the way to the right-hand edge of the screen. How can I make sure it sticks within the parent div's width?
Here's the essence of the code:
render() {
return (
<div class="container">
<Tabs>
<Tab>
<Grid>
<Row>
<Col md={12}>
<Panel>
Hi
</Panel>
</Col>
</Row>
</Grid>
</Tab>
</Tabs>
</div>
);
}
Try to use Grid's fluid prop to turn the Grid from fixed-width layout into a full-width layout.
See: https://react-bootstrap.github.io/components.html#grid : Props
render() {
return (
<div class="container">
<Tabs>
<Tab>
<Grid fluid={true}>
<Row>
<Col md={12}>
<Panel>
Hi
</Panel>
</Col>
</Row>
</Grid>
</Tab>
</Tabs>
</div>
);
}
I am trying to use Doxygen for the first time and so far I am pleased with most things. You can say the manual I am creating consists of two parts: one that is built up using .dox-files containing general information about the product; then part two is built from source files and shows the API.
The problem I am having is that the pages generated from source files don't appear like I want them to in the treeview. The part generated from .dox-files can easily be structured like I want it (using \page, \section and \subsection for example) but when I include the source files the new pages (Classes, Files) appear on the first level of the treeview:
V Project Name
> Installation (.dox)
> Licensing (.dox)
> Components (.dox)
> Tools (.dox)
> Getting Started (.dox)
> Classes (source files)
> Files (source files)
The least I would like to be able to customize the treeview is to move all the pages generated from source files down one level in the treeview (but if it is possible to customize the page structure like I do in the .dox-files that would be great):
V Project Name
> Installation (.dox)
> Licensing (.dox)
> Components (.dox)
> Tools (.dox)
> Getting Started (.dox)
V API
> Classes (source files)
> Files (source files)
Is this possible? While googling I managed to find something called "layout file" but I failed to understand how it works or if it would even help in this case.
If this is not possible then I have to put the API part in a separate manual but I really like to avoid this.
I appreciate any help.
I managed to solve this by changing the "layout file". The default file looks as follows:
<navindex>
<tab type="mainpage" visible="yes" title=""/>
<tab type="pages" visible="yes" title="" intro=""/>
<tab type="modules" visible="yes" title="" intro=""/>
<tab type="namespaces" visible="yes" title="">
<tab type="namespacelist" visible="yes" title="" intro=""/>
<tab type="namespacemembers" visible="yes" title="" intro=""/>
</tab>
<tab type="classes" visible="yes" title="">
<tab type="classlist" visible="yes" title="" intro=""/>
<tab type="classindex" visible="$ALPHABETICAL_INDEX" title=""/>
<tab type="hierarchy" visible="yes" title="" intro=""/>
<tab type="classmembers" visible="yes" title="" intro=""/>
</tab>
<tab type="files" visible="yes" title="">
<tab type="filelist" visible="yes" title="" intro=""/>
<tab type="globals" visible="yes" title="" intro=""/>
</tab>
<tab type="examples" visible="yes" title="" intro=""/>
</navindex>
I changed to:
<navindex>
<tab type="mainpage" visible="yes" title=""/>
<tab type="pages" visible="yes" title="" intro=""/>
<tab type="usergroup" visible="yes" title="API" url="#ref api" intro="">
<tab type="modules" visible="yes" title="" intro=""/>
<tab type="namespaces" visible="yes" title="">
<tab type="namespacelist" visible="yes" title="" intro=""/>
<tab type="namespacemembers" visible="yes" title="" intro=""/>
</tab>
<tab type="classes" visible="yes" title="">
<tab type="classlist" visible="yes" title="" intro=""/>
<tab type="classindex" visible="$ALPHABETICAL_INDEX" title=""/>
<tab type="hierarchy" visible="yes" title="" intro=""/>
<tab type="classmembers" visible="yes" title="" intro=""/>
</tab>
<tab type="files" visible="yes" title="">
<tab type="filelist" visible="yes" title="" intro=""/>
<tab type="globals" visible="yes" title="" intro=""/>
</tab>
<tab type="examples" visible="yes" title="" intro=""/>
</tab>
</navindex>
I created the API page (referenced by the usergroup tab) in a file called api.dox:
/*! \page api API
TODO: Add text here...
*/
I can't reach component by id in the included .zul page. I have one main.zul with a controller and I need to get a component in included zul page through the java controller class, but it returns null.
I know the included method creates new id space but is there any way to get this component?
UPDATE
Here is my code:
the main zul page
<?page title="DealerVizard.zul"?>
<?page id="main" ?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./Dealer" ?>
<zk>
<style src="/resources/css/default.css" />
<window id="Dealer" class="index"
apply="com.i2i.prm.controller.IndexController">
<div class="content" width="100%">
<tabbox id="tb" forward="onSelect=onSelect">
<tabs id="tabs">
<tab id="info" label="INFO" />
<tab id="create" label="CREATE" />
<tab id="edit" label="EDIT" />
<tab id="test" label="TEST PANEL(LIST BOX)" />
</tabs>
<tabpanels>
<tabpanel id="DealerInfo">
<include id="DealerInfoContent"
src="View/Dealer/DealerInfo.zul" />
</tabpanel>
<tabpanel id="DealerCreate">
<include id="DealerCreateContent"
src="View/Dealer/DealerCreate.zul" />
</tabpanel>
<tabpanel id="DealerEdit">
<include id="DealerEditContent"
src="View/Dealer/DealerEdit.zul" />
</tabpanel>
<tabpanel id="PagingListBox">
<include id="PagingListBoxContent" // Included here
src="View/TEST/PagingListBox.zul" />
</tabpanel>
</tabpanels>
</tabbox>
</div>
</window>
</zk>
PagingListBox.zul (Included page)
<?page id="list" ?>
<zk>
<grid width="100%">
<columns>
<column label="" />
</columns>
<rows>
<row>
<listbox id="listModel" width="100%" height="100%"
visible="true" span="true" pagingPosition="top" rows="20"
selectedItem="#{DealerController.selected}"
model="#{DealerController.userList}"
forward="onSelect=//main/Dealer.onSelect">
<auxhead>
<auxheader colspan="1">
<textbox
value="#{DealerController.searchUser.name}" maxlength="9"
id="searchCO_ID" forward="onChanging=//main/Dealer.onSearch"
width="100%">
</textbox>
</auxheader>
<auxheader colspan="1">
<textbox
value="#{DealerController.searchUser.surname}" maxlength="21"
id="searchMSISDN" forward="onChanging=//main/Dealer.onSearch"
width="100%">
</textbox>
</auxheader>
<auxheader colspan="1">
</auxheader>
</auxhead>
<listhead>
<listheader label="Name"
sort="auto(UPPER(name))" />
<listheader label="Surname"
sort="auto(UPPER(surname))" />
<listheader label="Delete ?" />
</listhead>
<listitem self="#{each=USERLIST}">
<listcell>
<label value="#{USERLIST.user.name}" />
<textbox
value="#{DealerController.tmpUser.name}" visible="false" />
</listcell>
<listcell>
<label value="#{USERLIST.user.surname}" />
<textbox
value="#{DealerController.tmpUser.surname}" visible="false" />
</listcell>
<listcell>
<button label="Update"
forward="onClick=//main/Dealer.onUpdate" visible="false" />
<button image="icons/edit-delete.png"
label="Delete" forward="onClick=//main/Dealer.onDelete"
width="100%" disabled="true" />
<button label="Save"
forward="onClick=//main/Dealer.onSave" visible="false" />
<button label="Cancel"
forward="onClick=//main/Dealer.onCancel" visible="false" />
</listcell>
</listitem>
</listbox>
<paging id="pagingData" pageSize="20" />
</row>
</rows>
</grid>
</zk>
IndexCOntroller.java
public class IndexController extends GenericForwardComposer {
private List<User> userList = new ArrayList<User>() ;
AnnotateDataBinder binder;
Tabbox tb;
Window Dealer;
private int pageCount=0;
#Override
public void doAfterCompose(Component comp) throws Exception {
// TODO Auto-generated method stub
super.doAfterCompose(comp);
comp.setVariable(comp.getId() + "Controller", this, true);
binder = (AnnotateDataBinder) Dealer.getVariable("binder", true);
System.out.println(Path.getComponent("//list/listModel"));
}
public IndexController() {
// TODO Auto-generated constructor stub
}
}
Normally I wouldn't recommend using Path.getComponent() way to access other components as your application code becomes tightly coupled with your component structure in your view page.
In your case you simplest way is to use AbstractComponent#getFellow(String compId) method so for eg.
Include inc = (Include) Dealer.getFellow("PagingListBoxContent");
Listbox listModel = (Listbox) inc.getFellow("listModel");
System.out.println(listModel);
So in future even if you insert any other component in your ZUML page before your listbox your code will still work.
UPDATE: BTW there was an interesting blogpost on this very topic on ZK blog recently
if your include have id, you can use dollar sign to get the inner components
<zk>
<include id="inc" src="test.zul />
</zk>
test.zul
<zk>
<label id="lab1" value="test1" />
</zk>
you can use "inc$lab1" get the label in test.zul
You can access any component in any other id space using zscript or java. if it is on the same page, but different window then (component B in window A):
Path.getComponent("/A/B");
if it is on a different page then (component B in window A on page P):
Path.getComponent("//P/A/B");
You can find documentation here: http://books.zkoss.org/wiki/ZK%20Developer%27s%20Reference/UI%20Composing/ID%20Space
You can add in your IndexController.java:
...
private Include DealerInfoContent;
...
this way you can access the included component within the parent composer.
(I would suggest to use camelCase ids for it, though).