I'm trying to write a GWT app that reuses the same template for every "page" (place). There are 4 main "pages" of the app:
Dashboard page (http://www.mywebapp.com/#dashboard)
Calculator page (http://www.mywebapp.com/#calc)
Configurator page (http://www.mywebapp.com/#config)
Login page (http://www.mywebapp.com/#login)
Each "page" has the same templated look-and-feel: (1) a header section that contains the logo and the navigation menu, (2) a content section that contains "page"-specific content (i.e. will be different for the #dashboard place, #login place, etc.), and (3) a footer section that contains some links. So you see, the only thing that changes from page-to-page is the content section. Just like an ordinary, templated web site.
The thing is, each "page" (place) is actually a fairly complicated UI with many different panels consisting of lots of widgets. As the user interacts with the app, these panels will come into and out of existence and the display will be changing all the time. For instance, on the #calc page, the user can select which "mode" to display a calculator in: either as Basic or as Advanced. When the user selects Advanced, several additional panels will display (in addition to the Basic panel).
It would be nice to be able to keep such actions in history, so that the user can bookmark the app in either Basic or Advanced mode, so something like:
http://www.mywebapp.com/#calc/basic; or
http://www.mywebapp.com/#calc/advanced
Here's the problem:
We already have several "levels" of activities/places going on here. At the "app"-level, we have the template that needs to be displayed to the user when the MyWebAppModule implements EntryPoint downloads. This TemplatePlace is the default/initial place that is registered with the HistoryHandler before calling:
public class MyWebAppModule implements EntryPoint {
#Override
public void onModuleLoad() {
// ...
// The first place we go to when this module downloads.
TemplatePlace templatePlace = getSomehow();
historyHandler.register(placeController, eventBus, templatePlace);
historyHandler.handleCurrentHistory();
}
}
Next, we have all the different "pages": DashboardPlace, CalculatorPlace, etc. that all have their own unique views/displays. For instance when the user clicks the Calculator link to go to CalculatorPlace, it should render a different view than when the identify that they want to use the calculator in Basic or Advanced mode.
Finally, we have the different display regions, panels, etc. inside each page/place, such as the BasicCalculatorPlace and AdvancedCalculatorPlace. This is what I mean by different "levels" of navigation:
Application-level (a template to apply to all pages/places)
Page- or place-level
Display- or panel-level
The question:
I want to achieve bookmarkable URLs (places) for when the user does all of the following:
Goes to the home page (http://www.mywebapp.com)
Goes to any of the "pages" (http://www.mywebapp.com/#calc, etc.)
Uses the pages/places which cause page-specific panel or display configurations (http://www.mywebapp.com\#calc\#advanced, etc.)
How many Activities and Places do I create? How many ActivityManagers? I guess I'm asking for how granular Activities/Places need to be for each "level" of bookmarkable UI. Thanks in advance!
I think you only need one ActivityManager and one Activity per "page". You can make your "header" and "footer" into widgets that can be reused in each page.
You can bookmark different states of the same page by using tokens. For example, you can set a token to "basic" - it would tell the CalculatorActivity to show basic calculator panel. The URL will look like:
www.myApp.com/?#Calculator:basic
When a user clicks on a widget to select an advanced option, you do
PlaceController.goTo(new CalculatorPlace("advanced"));
The CalculatorActivity will get the CalculatorView (which is already displayed), it will see that the token is set to "advanced" and it will instruct this view to show advanced panels.
Note that you can make your tokens as detailed as necessary and then parse them in Activity. For example, you can have something like
www.myApp.com/?#Calculator:option=basic&position=top&theme=pink
Related
In Lazarus, there are 2 different kinds of tab elements (cf. Free Pascal docs):
TPageControl
TPageControl is a multi-page component that provides a container to hold a variety of controls per page.
TTabControl
It is a tabbed container component which looks identical to a TPageControl. However, there is a fundamental difference because the control always shows the same page whichever tab is selected. In fact, it containts only a single page. The idea behind this concept is illustrated best by an editor or viewer for text files: When the TabControl contains a TMemo then the individual tabs refer to the files loaded into the memo; whenever the active tab changes another file is loaded into the (same) memo.
In this sense, JavaFX TabPanes are quite similar to TPageControls, but I rather want to replicate a TTabControl. I know I could in fact programmatically create a new Tab(), but I want to visually design it in SceneBuilder.
Is there maybe a way to load a separate .fxml file into a new Tab() element which is then added to the TabPane? (And how could I then access a tab's children?)
I chose the easiest approach: Implementing a head-less TabPane to detect when the user switches between tabs. The elements that appear to the user as the “tab content” are actually placed outside the TabPane, and their content is dynamically changed whenever the tab is switched.
I want to move a google map into an activity Android without using the fingers but only using four buttons (objects) with the directions: left, right, top and bottom.
Any idea on how to do this?
Based on the documentation, you can use draggable:false in preventing maps from being dragged.
You can use this link for more information.
Also, here is a related article that you can refer to:
How can I disable scrolling on the Google Maps mobile layout?
Regarding the controls, I think you can actually add custom controls aside from the existing and default controls. Note that few rules are necessary to be followed:
Define appropriate CSS for the control element(s) to display.
Handle interaction with the user or the map through event handlers for either map property changes or user events (for example, 'click' events).
Create a <div> element to hold the control and add this element to the Map's controls property.
Please see this link for more information and examples.
Hope this one will help.
I have a configurations pane in my JavaFX 8 application that is spread across a number of tabs within tabs. Currently I am forced to split tabs for a longer configuration process.
I know that I'll have two .fxml files for the two tabs, but I should be able to use the same controller for both. Currently, however, if I make changes to one tab, the other tab doesn't see the changes. I'm guessing it creates a separate instance of the controller. Is it possible for the two .fxml tabs to use the same instance of the controller so that the information can be shared across the two tabs?
Example for more clarification:
Tab1 contains textfield input for email, Firstname, etc.
Tab2 uses email information and generates usernames and allows user to modify other settings using the generated values.
To reuse a controller between multiple FXML loads, you can use fxmlLoader.setController() or fxmlLoader.setControllerFactory().
I don't really recommend a reused controller approach, so I won't post detailed code for it here. Rather, I recommend passing parameters.
I use GWT 2.4.
I have a log of widgets on my web page, there are a huge tab panel with 13 elements, each element of tab has a panel. I use GWT framework. I have to make some logic when one of those elements is visible for user, how to implement it ???
I use Timer for "some logic" and to check whether the panel is visible or not.
I check :
if (somePanel.isVisible()) { do smth}
but it's not working because I also have other links and another elements and when I switch to another element it works but if I click on link - does not.
Thank you in advance :)
I suppose you're using MVP,
You should do the display logic on page load through a model that you write to the place url. links change place so your views are reinitialized (if you don't have a clientFactory)
Anyway, you don't give any details on why it doesn't work with links and what means
when I switch to another element it works
I am trying to create a dialog that has an xtype of "textfield"...I need to specify that anytime the user updates this field it will always overwrite the same JCR content node.
I am including this component/dialog in multiple pages, so that the author can edit the text. The issue is that the text will be updated for that page. (because I am using a relative path).
What I need to happen...The content is updated and written to a central location so that no matter which page the user edits this text it will always update to a central location.
A real world example:
We have modal dialogs that show throughout the site. Some of these dialogs are global. Out client has requested to have an edit option on any page that these dialogs show. The acceptance criteria is that they can edit on any page and that edit will be applied globally.
My problem is that I am not sure how to set the path that the text field will write to.
I am retrieving the content from here:
<cq:include path="/content/jjj/en/misc/deviceoutmodal/jcr:content/buttontext1" resourceType="zig/components/text"/>
How can I write to the same path?
I think this would be best achieved with design dialogs — you can set a property based on the component (or template), which will then get used by every instance of that component.
The editor can edit the property when in Design mode, (or through the Designer as far as I remember). Design dialogs are created like regular dialogs but named design_dialog.xml. The example use-case that Adobe lists is for a logo component:
The Logo component displays the logo of the website Geometrixx. The
logo image and the home link can be configured globally (same for
every page of the website) so that every instance of this component is
identical. Therefore a design dialog is needed to provide the image
and path of the home link to the design of the corresponding Page. The
Logo component is placed in the upper left corner of all pages on the
website.