I have this little piece of code which aims to set the tab content and select it. The contents go to the right tab, but somehow the selected tab is a different one:
private void setTabContent(Tab target, Component content,
String permission) {
Layout l = (Layout) target.getComponent();
l.removeAllComponents();
l.addComponent(content);
right.setSelectedTab(target);
}
In the example right is a TabSheet. I suspect there's a bug somewhere but it seems it's on Vaadin side. I doubt no one has seen this if that was the case.
Using Vaadin 7.7.7. Source can be found here. It's on the test-management branch. To trigger it just login (admin, admin as credentials) then click on any node on the tree on the left. The content is sent to the Main tab, but the Tester tab is highlighted instead.
Related
I am currently trying to build an application using Google App Maker. After a user hits a "Create" button, depending on whether the files were successfully or unsuccessfully sent, a popup snackbar should display saying "File successfully sent" or "Something went wrong. File not sent." I want to indicate to the user in the final deployed application (no bottom console log) whether their files were sent or not. I do not know how to do this. I have tried creating separate pre-created snackbars (one for success, one for failure) and having the clientscript function display either one depending on what is returned from the serverscript function. However, I do not know how to show them. How do you display a snackbar popup in a clientscript function? Thank you for your help!
Please follow below steps in order to display Snackbar page.
Create a Snackbar page in your appmaker. In order to click on Left Hand Side panel '+' button on the "Page" section.
Choose Pop up. Click "Next" button. On the Next page Select "Snackbar" and click on "Create".
This will create a snack bar page for you. Open the snack bar page. On the bottom part you can see a text box which will display your custom message. Bind a Function to it. Show cased below.
Now in the client script add the following code to configure Snackbar.
This will create a Reusable Snack bar for you for all different messages.
//Client Script
var notificationText='';
function setNotificationText(text)
{
notificationText=text;
}
function getNotificationText()
{
return notificationText;
}
Whenever any event happens add the following code to Display Snackbar.
setNotificationText('Congratulations!!! You have successfully showcased SnackBar');
app.popups.Snackbar.visible = true; //Snackbar is page name.
Here configuring Snackbar code is optional, just to reuse one page for many messages. You can directly showcase the Snackbar page by adding app.popups.Snackbar.visible = true; code in your client script.
I'm trying to find a way to change order of sitecore custom / editor tabs. by default sitecore displays custom tabs, content tab and dynamic tabs, and according to
https://www.markstiles.net/Blog/2011/02/27/editor-tabs-in-sitecore.aspx
the only way to change order of tabs is to dig into sitecore. sitecore forum isn't helpful either. any ideas if this is configurable in sitecore? above mentioned post is pretty old and sth might have changed since then, but I haven't found any info about it.
As of Sitecore 8.0 update 3, the sitecore code for retrieving the tabs is still the same with the addition of the buckets tab:
Retrieved from Sitecore.Client.dll in the Sitecore.Shell.Applications.ContentManager.Editor class
private static List<Editor.EditorTab> GetEditorTabs(Item item, Editor.Sections sections)
{
Assert.ArgumentNotNull(item, "item");
Assert.ArgumentNotNull(sections, "sections");
List<Editor.EditorTab> editorTabs = new List<Editor.EditorTab>();
Editor.GetCustomEditorTab(item, editorTabs);
Editor.GetCustomEditorTabs(item, editorTabs);
Editor.GetContentTab(item, sections, editorTabs);
if (InternalSettings.ItemBucketsEnabled)
{
Editor.GetNewSearchTab(item, sections, editorTabs);
}
Editor.GetDynamicTabs(item, editorTabs);
return editorTabs;
}
So unfortunately, it looks like this is still the order by which they get rendered. As the article mentions, this could potentially be overridden, but likely to be quite involved.
I've achieved this slightly different. Not 100% satisfied with the solution, but it works until there is a better option.
In my custom tab, that displays as the first tab and therefore the active tab when I select an item. I have added the following JavaScript code to change the active tab back to the standard Sitecore Tab.
parent.scContent.onEditorTabClick(this, null, "Content");
The code goes up to the parent window as the Tab is an iFrame and set the active tab to the "Content" tab.
My custom tab is a SPEAK tab running on Sitecore 8. Here is the SPEAK javascript PageCode for reference.
https://github.com/sobek1985/SitecoreContentEditorTabs/blob/Complete/SitecoreContentEditorTabs/SitecoreContentEditorTabs.js
And a blog post i wrote on the subject too: http://mikerobbins.co.uk/2015/07/14/sitecore-content-editor-tabs-in-speak/
I have a site on which I use several divs with one class, which are displayed, and severals divs with an other class which are hidden.
I would then like to have two buttons, which I can use to toggle between which one of the two classes are displayed, with the button for the currently displayed class beeing inactive.
When the button is clicked I would like it to take effect all through the site, so the correct class is also displayed or hidden on other pages on the site.
To simplify:
So if I click button A, class A is displayed all through the site, and button B is hidden. If I then click button B, class B is displayed all through the site, and button A is hidden.
Any ideas to an easy solution for this?
Since new UK legislation requires you to tell the users of the website about all cookies the website stores on their machine, I would recomend you use a session variable, you could use $_SESSION['class']="class1"; using PHP or you could use Session["class"] = "class1"; in C#, you could then check that session variable using an if statement by doing:
if($_SESSION['class'] == "class1")
{
// show class 1
}
else
{
// Show class 2
}
Te above code will work in C# by replacing the $_SESSION['class'] with Session["class"] To show or hide a div, you could either do it server side by adding the different styles in problematically or you could use javascript, though I'm not sure how you'd gain access to session variables via JavaScript since they are server side. JQuery would be a good library to use for showing/hiding DIVs though.
I'd probably store the current state in a cookie if it were me. Then just display/hide as it fits the users current state.
I have a Mobile Project in FB 4.6 with a TabbedViewNavigator. I have 4 buttons at the bottom, which are ViewNavigators, and act as the Tabs. For this instance, lets say the tabs are labeled, HOME, ADD, DELETE, and ABOUT. I am running into the following situation:
User presses the ADD tab.
In the ADD screen, user clicks on several links which takes them away from the ADD tab's firstView and to a new view all together. For this instance, let's say the active view is called PlayersView.
User now clicks another tab, for example HOME.
User decides to go back to the ADD tab. However, upon pressing the ADD tab, the user is taken to the last view, which in this case was the PlayersView.
How can I have the functionality changed so that upon pressing a Tab, the user is ALWAYS taken to the firstView property of that tab. As referenced above, this is not happening. I have tried creating an IndexChangeEvent listener on the tabbedNavigator and then changing the tabbedNavigator's selectedIndex, however this doesn't work.
protected function tabbedviewnavigatorapplication1_applicationCompleteHandler(event:FlexEvent):void {
this.tabbedNavigator.addEventListener(IndexChangeEvent.CHANGE,onIndexChange);
}
protected function onIndexChange(event:IndexChangeEvent):void {
this.tabbedNavigator.selectedIndex = event.newIndex;
trace(' THIS DOESN'T WORK');
}
Any help is appreciated. Thanks, in advance.
In your code, when you set
tabbedNavigator.selectedIndex
you switch between different ViewNavigators, not between different Views inside a ViewNavigator.
As I understand it, you are trying to stay within a single ViewNavigator stack and select the first View.
Let's say you have:
<s:navigators>
<s:ViewNavigator id="addSomethingNavigator" firstView="views.AddView"/>
<s:ViewNavigator id="deleteSomethingNavigator" firstView="views.DeleteView"/>
</s:navigators>
You can pop to a specific ViewNavigator's first View like so:
addSomethingNavigator.popToFirstView();
I'm working on a simple auto complete function for my Flex mobile app. For that I've got a CalloutButton that triggers a Callout.
The Callout holds some lists from which the user can select items. On item select, the callout gets closed (calloutButton.closeDropDown()).
The very same behavior is done for a TextInput. The user inputs text, the callout opens and according to the entered text, the lists change. Works fine so far. Now, when the user selects an item from any of the lists, the callout closes. Also fine.
Now the issue, after the callout is closed, the TextInput automatically regains focus.
On a mobile device this is more than disturbing.
I narrowed this behavior down to the mobile TextInput skin (spark.skins.mobile.TextInputSkin) since a TextInput without this skin class doesn't show this behavior.
Now you might say just use the default skin instead but unfortunately I can't. The default skin has a bug with Android devices that doesn't pass though the enter event. That I could live with since I'n not necessarily dependent on the enter event, however, the spark mobile skin allows be to continue entering text in the TextInput even after the callout has been opened, which is desperately needed as the lists change according to the entered text.
I can't provide any code as the problem has been narrowed down to the skinClass, thus should not be in my own code. Believe me, I tried every nice and not so nice method to prevent the TextInput from getting focus again, but nothing worked.
So, totally stuck here!
Hopefully you guys have some ideas on how to solve this.
Edit:
Below the steps of my application's behaviour. (to be fair, the workflow inside the callout is a little more complex, I'm working with several lists and a SplitViewNavigator here (thus can't use the Flextras autocomplete), but that doesn't affect the TextInput focus issue I'm facing).
Enter text in TextInput
On key change a Callout with two Lists is opened.
The first List receives results according to the entered text from a webservice
User selects item from list
Second list receives results according to selection from first list from webservice
User selects item on second list
Callout closes
This all works fine, except that the TextInput receives focus after the Callout closes.
I really don't know what triggers this behavior.
Edit2: Code to further illustrate the issue.
Naturally, this is stripped down to the very basics, but it mirrors the behavior of the component and focus.
First the CalloutButton and TextInput that can both control the Callout:
<ui:SearchCallout id="detailSearch"/>
<s:TextInput id="searchInput" skinClass="spark.skins.mobile.TextInputSkin"
enter="historySearch(searchInput.text)"
focusOut="searchFocusOutEvent(event)"
focusIn="searchFocusInEvent(event)"/>
The TextInput's focus handlers don't do anything related to the callout, they just set current states of another component, so I'll leave them out here.
Function historySearch closes the CallOut (I forced it to close as it wouldn't close with the usual closeDropDown()), formats the search text, handles a searchHistory and eventually triggers the search function that passes the formatted search text to the selected component.
Here are the parts that matter for this case:
private function historySearch(val:String):void {
detailSearch.forceClose=true;
detailSearch.closeDropDown();
searchEvent(_searchSyms, true);
}
Note: 'val' (the TextInput's text) is trimmed and whatnot, eventually it will result in an array of strings, represented by '_searchSyms'.
Further eventListeners are as follows:
searchInput.addEventListener(KeyboardEvent.KEY_DOWN, onKeyEvent);
searchInput.addEventListener(FlexEvent.VALUE_COMMIT, onKeyEvent);
searchInput.addEventListener(TextOperationEvent.CHANGE, onTextChange);
KEY_DOWN and VALUE_COMMIT don't have anything to do with the Callout, they are used to handle stuff for the searchHistory, hence I'll leave the onKeyEvent function out here.
onTextChange triggers the string search on the server and closes the Callout in case the TextInput's text is an empty string:
private function onTextChange(event:Event):void {
if(searchInput.text=="") {
if(detailSearch.isDropDownOpen) {
(detailSearch.rightView.activeView as RightView).clearDetailList();
detailSearch.isCloseable=true;
}
}
_searchManager.getRicsByChar(searchInput.text);
}
Eventually the server will respond and passes an array of responses. The Callout gets opened and it's lists are filled with the responses.
I won't paste all the Callout content's code here as it would be way too much. Basically, the user selects an item from any of the lists, the Callout is forced to close and the search function that passes the value to the component (not yet pasted here, be patient ;), is given the item's value. That basically looks like this (never mind the FlexGlobals stuff, this gets all refactored once the focus issue has been resolved):
var search:String = String(event.currentTarget.selectedItem);
FlexGlobals.topLevelApplication.detailSearch.forceClose=true;
FlexGlobals.topLevelApplication.detailSearch.closeDropDown();
FlexGlobals.topLevelApplication.searchEvent(new Array(search), true);
Allright, now the final step of the whole functionality, the searchEvent. As already said, this function basically only passes the formatted search value to the selected component. This either happened on 'Enter' of the TextInput (as the code above shows), or on selection of an item from one of the Callout's lists.
public function searchEvent(_searchSymbols:Array, setText:Boolean):void {
if(setText) {
var _searchString:String="";
for each (var _sym:String in _searchSymbols) {
_searchString += _sym + ", ";
}
searchInput.text = _searchString.substring(0, _searchString.length-2);
}
stage.focus=null;
if(selectedWindowContainer) {
// set the array of search items to the selected component here
selectedWindowContainer.setFocus();
} else
trace("[MAIN] no component selected");
}
And that is basically it. This function is the last step of my search routine, and the selected component (that will get the search items), is getting the focus.
Yet, it automatically loses focus again and the TextInput will receive it. I have no idea where and why this happens, and I need to get rid of this behavior asap!
Wow, what a post, anyone still reading this? ;) Well, I hope so.
Well, after hours of testing several ways to prevent the TextInput from automatically gaining focus, I (kinda) solved the issue, although I think it's more a dirty hack than anything else.
Setting the TextInput's focusEnabled to false works fine, even though the focus indication (border around the TextInput) won't work with this any more (an issue I can live with for now).
Still, I'd really like to know what exactly is going on here, especially in the mobile skin class.