I am porting my Android app to iOS and I am using Codename One for that.
In my app an EditText can contain icons mixed with text. It is accomplished with instructions like these:
MyImageSpan iconSpan=new MyImageSpan(activity, R.drawable.icon);
editText.getText().insert(caretPosition,CHAR);
editText.getText().setSpan(iconSpan,caretPosition,caretPosition+1,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
then in other parts, spans have to be detected, if present, and it is performed like this:
Editable editable = editText.getText();
for (int i = 0; i < editable.length(); i = next) {
// find the next span transition
next = editable.nextSpanTransition(i, editable.length(), MyImageSpan.class);
// get all spans in this range
MImageSpan[] tempSpans = editable.getSpans(i, next, MyImageSpan.class);
...
...
//In my app that becomes really complex
...
...
...
...
}
I tried to use this online tool:
http://fontello.com/
to manage icons like font glyphs, as it seems to be adviced by Codename One documentation.
In fact I do not understand if it is possible to have spans with different fonts in an TextField in Codename One, and I do not know if I could find and manage them inside the TextField.
But the most important thing is that the online tool to create fonts out of svg files did not work for me because some icons are reverted, others are broken or confused, others are tiny, depending on the saving format (eventually I saved in pure SVG format to avoid issues but it's the same).
What I am asking is how to handle the spans in the TextField in Codename One.
It has not to be the same "way" but the result has to be the same.
This won't work. Rich text edit is something that's just too different between platforms and isn't universally available. Since the edit component is implemented using native widgets it's very hard to consistently abstract something like this and effectively impossible.
However, web tools solved that problem already and include some cross platform rich edit tools that work. You can just use one of those tools and embed a BrowserComponent in your app. Then perform the rich editing within the browser component.
Back in the day we did it with CK editor, but this library is pretty out of date by now so I'm not sure how well it works. It should be relatively easy to create something like this though.
Related
What is the proper way to remove the grey background that covers the entire screen, the recompile button, and the default libGDX load and/or load splash in a HTML build of my game?
Note: This answer applies only to the gdx-setup tool as of late 2022. The gdx-liftoff tool is similar but has a slightly less boneheaded configuration out of the box. Additionally, I would like to get some of libGDX's HTML backend reworked one day, as there is no point in the padding and it's applied unevenly, plus less obvious things like the way it creates a table for layout.
Grey background
The background colour can be customised by changing background: #222222 in html/webapp/styles.css to some other colour. Or apply it directly to the body in index.html and delete styles.css (plus the link to it) as it doesn't contain anything important once the superdev button has been removed.
Grey border
The border around the game can be removed by editing HtmlLauncher like so:
#Override
public GwtApplicationConfiguration getConfig () {
GwtApplicationConfiguration config = new GwtApplicationConfiguration(true);
config.padHorizontal = 0;
config.padVertical = 0;
return config;
}
Separating GwtApplicationConfiguration into a config variable brings it in line with the other launchers (desktop, Android, iOS) and setting the padding to 0 is self-explanatory. While we're here, passing true into the app config's constructor tells it to render at native resolution on high-DPI/"retina" displays instead of upscaling.
Recompile button
Or the superdev button, as I call it. Just remove the <a class="superdev"... line from html/webapp/index.html. If you need access to it during development, it's recommended you add its link to your bookmark bar. Visibility of the bookmark bar can be toggled using Ctrl+Shift+B in Chrome and Firefox.
Load/splash screen
You're probably best referring to https://libgdx.com/wiki/html5-backend-and-gwt-specifics#changing-the-load-screen-progress-bar for this (which may not have existed when the question was asked). In short, getPreloaderCallback() and adjustMeterPanel() can be overridden in HtmlLauncher. I typically just overwrite logo.png after building instead of using the recommended method for changing the logo.
Other changes
Things you might want to change before a final release:
styles.css isn't very important beyond changing the background colour, as noted earlier.
In index.html, a comma should be added to between device-width and initial-scale for it to be valid HTML.
In index.html, applying align="center" to a div is deprecated behaviour. Probably best remove that alignment. If you need it, apply via CSS instead.
In index.html, handleMouseDown() and handleMouseUp() are completely pointless, as far as I can see. I don't use them for my own projects and have had no complaints.
html/build/dist/assets/assets.txt references some files that may not be necessary. The default font (arial or lsans, depending on libGDX version) is only needed if you use it and the vertex/fragment shaders are only needed if you do 3D stuff, I believe. Removing these can remove load times ever so slightly, especially on HTTP/1.1 connections. But I don't have an automated way to remove those lines (except on Linux - head -n -8).
Setting an asset filter as seen at https://libgdx.com/wiki/html5-backend-and-gwt-specifics#speeding-up-preload-process is an easy way to reduce your load times. I return false for music files to reduce load times greatly - it ends up streaming music instead of preloading it (if using Music, not AssetManager).
I own a sports apparel company and I'm looking to have an applet built that will allow customers to see how their team names will look in certain colors on jerseys. Below you can see the final result of a competitor site's Flash applet where text is rendered on 2D surfaces/images.
My requirements: I need users to be able to set the font, primary text color, outline text color, and text style (arched or straight).
So my question-- Is this sort of text rendering possible with only Javascript/PHP?
If so, what limitations do you for see? I've been told the arching and outline text color may be issues. I've also been told that I may have to upload library files to a server where the actual rendering may take place.
If not, what scripting would you guys recommend? I'm trying to stay away from Flash because it's slow and costly.
I'll be passing this onto our developers so please feel free to be as detailed as possible. I figure'd I'd save them some leg work!
Thank you!
Depending on how complex you want your graphics to be, html5 drawing abilities could be used. Check Raphaël library, for instance, webGL/canvas renderers already have a lot of features in modern browsers.
As of the solution with server rendering, it's also possible with gd2(php), but imho that would be less convenient, at least try something different from php (btw, what's your backend running on?)
Your competitor's solution with java applet honestly seems the easiest, except that it requires jre, which few people are eager to install =)
That's kind-of a high level question, but yes you can definitely use javascript for it.
If there's a problem with getting characters to look right, you can always save each letter as a separate image and have javascript place them next to each other in preview. I'd try to see how close you could get with the existing fonts first.
Layering the text: one color large font, then a different color smaller font will give you the outline effect your looking for.
I am currently writing on a Plugin that uses a view with a TreeViewer. The thing is, as content for my Nodes I get plain HTML. I would like to display the HTML styled or, if not possible, the simple plain text without any HTML. But the issue I run into is that the TreeViewer is not displaying enough text.
As you can see the HTML is not completly displayed and that everyting is only one line is not pretty aswell. I would like to have a box or something that can display the text (doesnt matter if the box does not support the HTML-styling, I can do this from hand).
Currently I'm using a LabelProvider that is returning the Text of a Node as string (and from what I can see this is the only possible Option with a LabelProvider).
As workaround I could only think of cutting the text into serval nodes but I would like to know if there are better options out there ;)
If it's your own LabelProvider, you can truncate or manipulate the text shown however you wish. Since it ultimately ends up as a native control, you're basically stuck with text label with a single image (plus whatever IColorLabelProvider offers) as long as you're using a tree control.
You could experiment with the Figures from the GEF project or the Nebula CompositeTable as alternatives.
you can use a editor to show the content, this would be appropriate with your requirement. View can also be think for it. tableviewer clould also be least choice. TreeViewer generaly use to deal with hierarchical data.
There are several label providers available in Eclipse in the org.eclipse.jface.viewers package. You can choose to implement your own or extend one of them to choose your need.
Looking at the image, I would recommend to display only few words in the tree and the entire content of the node could be in a different pane/tool tip.
We have a requirement where we already have pre printed stationery and want user to put data in a HTML form and be able to print data on that form. Alignment/text size etc are very important since the pre-printed stationery already has boxes for each character. What could be a good way to achieve this in java? I have thinking of using jasper reports. Any other options? May be overlay image with text or something?
Also we might need to capability to print on plain paper in which case the boxes needs to be printed by our application and the form should match after the printed with the already printed blank stationery containing data.
Do we have some open source framework to do such stuff?
Jaspersoft reports -- http://sourceforge.net/projects/jasperreports/
You will then create XML templates, then you will be able to produce a report in PDF, HTML, CSV, XLS, TXT, RTF, and more. It has all the necessary options to customize the report. Used it before and recommend it.
You will create the templates with iReport then write the code for the engine to pass the data in different possible ways.
check http://www.jaspersoft.com/jasperreports
Edit:
You can have background images and overlay the boxes over it and set a limit on the max character size ... and many more
It is very powerful and gives you plenty of options
Here is one of iReport's tutorial for a background image http://ireport-tutorial.blogspot.com/2008/12/background-image-in-ireport.html
The big problem when printing form content that has been filled in electronically, is aligning it correctly on the pre-printed form. You may get content to align for one printer, but when you use another it is completely misaligned.
Fly Software have a form design product called InForm Designer that gets around the problem nicely by allowing users to specify and save vertical and horizontal offsets for printers. This ensures filled in form content is always aligned. I've tried it and it works perfectly. Take a look for yourself here...
http://www.flysoftware.com/products/inform_designer/overview.asp
It might be worth implementing a printer offset similar to InForm's in your own application (if possible).
Some things to think about.
First in terms of the web page, do you want use the stationery as the form layout?
Does it have to be exact?
Combed boxes (one for each character)
Do you want to show it like that on the web page, or deal with the combing later.
How are you going to deal with say a combed 6 digit number. Is this right aligned. What if they enter 7 digits. Same for text. what if it won't fit.
Font choices, we had a lot of fun with W...
How aligned do you want the character within the box, what font limitations does that imply, some of the auto magic software we looked at did crap like change the size of each character.
Combed editing is a nightmare, we display combed, but raise an edit surface the size of the full box on selection.
Another thing that might drive you barking mad, you find find small differences in the size and layout of the boxes, so they look okay from a distance but a column of boxes sort of shifts about by a pixel. Some of testing guys had to lend us their electron microscopes, so we could see how many ink molecules we were out by. :(
Expect to spend a lot of time in the UI side of things, and remember printed stationery changes, so giving yourself some sort of meta description of the form to start with will save you loads of trouble later on.
I want to implement list like "stackoverflow question list" (where each row has multiple items, text, tags, user, time etc) in GWT. What should be most appropriate approach?
I tried using FlowPanel and inside that "HTML elements" so result will be DIVs inside DIV.
But, then CSS is pain.. (unable to set right aligned multiple rows and left aligned user profile image etc)
If I use table then, it GWT does not support row rendering. Need to work on cell, it is again pain.
so, Any suggestions?
(Please exclude GXT or SmartGWT like other heavy weight frameworks, just want to use core GWT. )
Cheers,
The major answer here is 'it depends'.
The general way I try to approach anything with GWT is to come up with an HTML mockup. Once you have a static version of the layout you want, complete with CSS, it's actually quite straightforward to convert this into GWT code. See this article on 'tags first gwt' for well written example.
The point to keep in mind with GWT is that ultimately, the browser is going to have to deal with a DOM structure you build up, so if you can make it correct without GWT, it is far easier to then make it correct with GWT.
Use DockPanel for contents like multiple items, text, tags, user, time etc...Then add the dockpanel to FlexTable.FlexTable will support to add rows.
How About gwt Grid? even that supports text and table.