How can I translate the datepicker from jQuery UI into an other language (german for exaple)?
There are already localized versions of the jQuery Datepicker. The demo doesn't appear to work as intended, but if you take the source code and build a page, you can see that it works
EDIT:
You can see the working versions here
Related
I'm using the Asciimath plugin for TinyMCE (http://www.imathas.com/editordemo/demo.html)
It was working fine until a few moments ago. Now I can see the math notation just fine in the editor, but on submitting the form, it's contents do not change to an image replacing the <span class="AM"> tag that the plugin creates.
Hence the HTML that the editor produces retains the Math-syntax I typed with the span tag and not show the Math notation properly in an image.
If anybody knows how to fix this, please help me. I'm really confused as to why it suddenly stopped working. A server-side text-replacement solution would be great as well.
I have tried this:
preg_replace('/\<span class="AM"\>`(.+)`\<\/span\>/', '<img src="http://www.imathas.com/cgi-bin/mimetex.cgi?$1" />', $str)
But that results in broken display of the Math fragment since some of the additional parameters like displaystyle that the script adds are lost.
NOTE I recently switched from regular-TinyMCE to the jQuery plugin TinyMCE. Could this be the reason the plugin is not working? I'm not sure if it broke functionality right after I made this change.
i am using GWT , but i need to add some styles to the text boxes,buttons,labels and panels i want to know how to integrate CSS to my own code
like the following links:
https://www.blueworkslive.com/index.html#!gettingStarted:overview
http://www.gogrid.com/
http://www.whirled.com/#landing-bluelanding
so if there is a tutorial which explains these issues... it will be very helpful
Start by reading the documentation on GWT CSS styling.
Glad to see a lot of posts about tinymce but there's nothing here that helps me with my current problem.
What I am trying to do is work out how to add "code" to my text with tinymce.
Something like this
Does anyone know how I can do this.
Help would be appreciated.
Mandy
You will need to add pre to the tinymce init setting valid_elements
You need to add to the editor the Code Sample plugin to your editor.
This is the example code to include the plugin from the TinyMCE website.
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "codesample",
toolbar: "codesample"
});
The codesample plugin uses http://prismjs.com/ to embed the code samples within the editor and works out of the box. That is, when a user copies valid code syntax into the editable area the code will be automatically formatted according to Prism default CSS rules.
You need to add prism.js and prism.css to your page for syntax highlighting to work.
Then you will get the code sample button in your editor interface.
Here you can find the Documentation about.
Does anyone know if in GWT we have a good TimePicker ?
In fact I want a widget in order to select hour and minute for GWT.
Thanks
AFAIK there's no such a widget. Also "a good TimePicker" is a bit suggestive. I've been looking for such a widget for a long time and I found some javascript examples that were completely awful, but some people is using.
Finally I decided to do my own, based in a TextBox with value control.
The source code is available, you can find more info here and on github I hope you like it.
I have seen some TimePicker that are simple ComboBoxes.
I know this question was asked a while ago, but I came across it during my search for a GWT time picker and I decided to write my own.
It supports many different input formats (4p => 4:00pm, 745 => 7:45am, etc) and has a drop-down menu with times at fixed intervals.
On iOS, it automatically uses an HTML5 input type="time"
Blog article describing the implementation
Demo of the UTCTimeBox
Demo of the UTCDateBox and UTCTimeBox being used together
Download at Google Code
I created gwt-timepicker which is using the concept of jquery timepicker. It does exactly what you need (hour/minute). Take a look: http://code.google.com/p/gwt-timepicker/
check this post: http://www.summa-tech.com/blog/2011/03/21/gwt-timepicker/
GWT Bootstrap GWT widget library has a nice date+time widget, along with many other solid widgets.
http://gwtbootstrap.github.com/#component:datetimepicker
Edit: Looks like there is newer version available for bootstrap 3.
The gwt incubator has an alright time picker
The code would be something like the example given:
// A TimePicker with no "AM/PM" and no "seconds" field and using 24H formatting for "hours" field
TimePicker timePicker = new TimePicker(new Date(), null, DateTimeFormat.getFormat("HH"), DateTimeFormat.getFormat("mm"), null);
I wrote a Time Picker recently. I wrote it in a hurry, so it's not the best out there, but it works fine.
It attempts to create a HTML5 <input type="time"/> and if it's not supported by the browser, it parses manually. I have tested it on Chrome and Firefox on PC, and iOS.
Accepted formats are:
12:59 AM
5 - assumed to be 5 AM
5p - 5:00 PM
13 - 1 PM
345 - 3:45 AM
1534 - 3:34 PM
111p - 1:11 PM
it implements HasValue<Long> to return the picked time as milliseconds. It also has a method to return the time combined with a given Date object.
Here's the source: https://github.com/srilankanchurro/gwt-stuff/blob/master/gwt-stuff/src/com/sathkumara/client/TimePicker.java
If you have modifications to contribute to this class, please feel free to send me a request on github.
DatePicker and DateBox
DatePicker datePicker = new DatePicker();
DateBox dateBox = new DateBox();
Here is GWT DatePicker example
and you can format the datetime to your needs with DateTimeFormat and here is example
GXT has a TimeField widget Example Good or not it's your choice :)
Maybe you can give an eye to DateTimePicker
https://github.com/ghuntley/Ext.ux.touch.DateTimePicker
I'm new to GWT, and I'm sure this is answered in SO somewhere but I've yet to find
I downloaded the GWT 2.0 eclipse plugin, and was pleased to see it comes with a starter project.
However, I was surprised that when running it, there is an unpleasent flickering...
The text loads without the CSS first
It takes a while untill the select box apears
(If you don't see the flicker, try and press F5 to refresh)
All mature GWT apps seem to have a loader before that but I didn't find an easy, standard way to add it.
It seems this app loads in this order: (correct me please if I mixed it up, its only my guess)
Basic layout HTML,
All JavaScript, and CSS
Runs the logic on the "onload" event (soonest time your compiled javaScript can start - ?)
So I can't programmatically add a loading spinner before GWT was loaded, a bit of a catch 22 for me
Am I missing something basic? is there a best practice way to add that initial spinner?
I was thinking simply adding a div with an animated gif, and in the onload event - hide it.
But I'm sure there is something better.
Let me know if this is a duplicate question
Update: found this related question, not answering mine though...
I've handled this problem before by not using the GWT module to load CSS, but loading it directly in the tag itself. If you do this, the browser will always load the CSS first, even before the GWT JS is loaded.
This means you'll lose a bit of flexibility and speed, but its the only workaround I've used so far.
EDIT: Extra info cause I want the bounty :D
If you do not remove the
<inherits name='com.google.gwt.user.theme.standard.Standard'/> from your module.gwt.xml file, then the GWT standard theme is loaded in the JS file that GWT creates. This JS file loads after the HTML page renders, and injects the CSS after load. Hence the flicker.
To avoid the flicker, you can comment out that line and insert your own stylesheet into the <head> of your HTML file. This ensures your CSS loads before the HTML renders, avoiding any flicker. If you really want the GWT theme, you get it out of the source code.
To use a spinner with GWT is quite easy. One simple way would be to keep it in a div with an id in the HTML file itself. Then, in the onModuleLoad(), simply hide that div by calling RootPanel.get("spinner").setVisible(false);
That should show the spinner till GWT loads itself.
Here's what we do to implement a spinner.
You put something like the following HTML just below the script line that loads your application (ie. the one with nocache.js). e.g.:
<div id="loading">
<div id="loading-msg">
<img src="icons/loading-page.gif" lt="loading">
<span>Loading the application, please wait...</span>
</div>
</div>
Then in your application EntryPoint you reach into the page using the DOM and remove that div. e.g.
final RootPanel loading = RootPanel.get("loading");
if (loading != null) {
DOM.removeChild(RootPanel.getBodyElement(),
loading.getElement());
}
Ehrann: I'm afraid the practice mentioned in the above answers is the only way for now. GWT doesn't provide similar features to show/hide a "loading" frame "on the fly". I guess one of the reason is that this requirement is not so "common" for all GWT users, one person might want a very different style of the "loading" than others. So you have to do that by yourself.
You can have a look at the GXT showcase page (based on GWT too): http://www.extjs.com/explorer/ for how they do that. For the source of it, download Ext GWT 2.1.0 SDK here: http://www.extjs.com/products/gxt/download.php and check the samples/explorer folder after extracting it. For details see the edit below:
EDIT
Check the source code for http://www.extjs.com/examples/explorer.html and you can see a div with id "loading". For each samples (extending Viewport), GXT.hideLoadingPanel(loadingPanelId) is called in onAttach() (the initialization), which hides the loading frame.
Check source code of Viewport here
Check source code of GXT.hideLoadingPanel here
You can do it in a similar way.
You could put an HTML loading message in the host page (use style attributes or embed the style tag in the header to make sure that it's styled), and remove the message once your modules has loaded, e. g. Document.get().getBody() with .setInnerHTML("") or .removeChild(), and then present your application programmatically however you want.