I want to create a JavaFX table that, in the cells of one column, allows the user to edit XHTML text. I only need very basic formatting capabilities like bold, italic, striketrough.
I have already managed to implement this by using my own subclass of TableCell and using a WebView for each cell (HTMLEditor would of course have been another choice, but my guess is that for my requirements, WebView should be sufficient).
However, to make editing comfortable for the user, I need the following features:
1. The cell height needs to resize if the user enters multi-line text.
2. A context menu (or, if not possible, some other menu or button) should allow formatting parts of the text in a cell as described above (bold, italic..)
Has anybody been successful in implementing something similar ? I have seen suggestions on the web, but they rarely included code samples.
I have succedded doing something similar.
I figured I can share some of the basic clues that allowed me to achieve it.
Resize the whole WebView. For that, the whole WebView must be an editable html page. You achive that by setting contenteditable to true:
<body contenteditable='true' id='content'></body>
You can have a context menu over a webview. But it is something tricky, as you must first disable the original context menu associated to it.
WebView editView;
...
EventDispatcher originalDispatcher = editView.getEventDispatcher();
editView.setEventDispatcher(new WebmenuEventDispatcher(originalDispatcher));
And this is the event dispatcher class:
public class WebmenuEventDispatcher implements EventDispatcher {
private EventDispatcher originalDispatcher;
public WebmenuEventDispatcher(EventDispatcher originalDispatcher) {
this.originalDispatcher = originalDispatcher;
}
#Override
public Event dispatchEvent(Event event, EventDispatchChain tail) {
if (event instanceof MouseEvent) {
MouseEvent mouseEvent = (MouseEvent) event;
if (MouseButton.SECONDARY == mouseEvent.getButton()) {
mouseEvent.consume();
// Show our own menu
cmEdit.show(editView.getScene().getWindow(), mouseEvent.getScreenX(), mouseEvent.getScreenY());
}
}
return originalDispatcher.dispatchEvent(event, tail);
}
}
Now, for setting the font from within that menu, you need a bidirectional Java<->javascript bridge and use some javascript in the webview side.
Related
I'm building an Android and iOS app using Xamarin Forms.
What I'm simply trying to do is set a background drawable on my Android app for my ListView items. The root view of my ListView items are StackLayout's:
var listView = new ListView
{
ItemsSource = items,
ItemTemplate = new DataTemplate(() =>
{
return new ViewCell
{
View = new StackLayout(...)
};
}
};
I know I can access the native element by using a custom renderer:
public class MyEntryRenderer : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (e.OldElement == null) {
var nativeEditText = (EditText)Control;
...
}
}
}
But I'm not sure how this would work for a StackLayout (or any other layout for that matter).
I first extended StackLayout:
public class ListViewItem : StackLayout
{
}
And I read somewhere that layouts use the VisualElementRenderer, so I tried the following:
public class ListViewItemRenderer : VisualElementRenderer<StackLayout>
{
protected override void OnElementChanged(ElementChangedEventArgs<StackLayout> e)
{
base.OnElementChanged(e);
// any way to access the native element?
}
}
But VisualElementRenderer does not seem to give me access to the native element.
So is there any way I can access the native elements of Layout elements? Or maybe there is a different way to simply set a background drawable on layouts within my Android app?
Even though I still don't know how to access the native element of a layout, the VisualElementRenderer has a method for setting the background drawable on Android (which was exactly what I needed). So I ended up with the following:
protected override void OnElementChanged(ElementChangedEventArgs<StackLayout> e)
{
base.OnElementChanged(e);
SetBackgroundDrawable(Resources.GetDrawable(Resource.Drawable.listViewItem));
}
I understand you want to hook into an existing Layout renderer and extending it to access the native element with extra capabilities like background image.
Eventually the support for background-image will be supported just like background-colour is, I imagine, across the Layout controls. It may be worth while waiting for this as I can't see why they wouldn't implement these in a later release.
In the mean time you would need something that would work and is quite easy to implement?
Creating the background drawable via inheriting the renderer from a Layout may not be the simplest of solutions therefore, although does have its advantages as you can then re-use easily with the extra functionality across all Layouts for an application.
In your code for ListViewItemRenderer, however, it is inheriting from a Xamarin.Forms control (you specified StackLayout) and have not specified a native, platform dependent, control to be the base for the layout control that would have to match the Xamarin.Forms platform dependent control used.
Each Renderer is tied to a native element. Layout controls will be no different than other custom native control renderers.
For a custom control, you will write a renderer something like the following (note I haven't specified a layout renderer as I haven't had a need to do this yet and am just going from past experience - but similar rules should apply to implementing a renderer for a layout as opposed to a custom control):-
// System.Windows.Controls.Grid in this case is the root native control for a WindowsPhone renderer of MyControl
public class MyControlRenderer : ViewRenderer<MyControlView, System.Windows.Controls.Grid>
There is a simpler approach, however to achieve what you want to do:-
The simpler approach would be instead of inheriting from the Stack Layout control, it would be better to inherit from Grid as the root of the control.
Then you can add an Image control to the Grid and also a Stack Layout for the same Grid Row and Column.
By doing the above you will be able to achieve a background-image across the entire listview item row.
I need to handle multiple panels, containing variuous data masks. Each panel shall be visible using a TreeView control.
At this time, I handle the panels visibility manually, by making the selected one visible and bring it on top.
Actually this is not much confortable, especially in the UI designer, since when I add a brand new panel I have to resize every panel and then design it...
A good solution would be using a TabControl, and each panel is contained in a TabPage. But I cannot find any way to hide the TabControl buttons, since I already have a TreeView for selecting items.
Another solution would be an ipotethic "StackPanelControl", where the Panels are arranged using a stack, but I couldn't find it anywhere.
What's the best solution to handle this kind of UI?
You need a wee bit of Win32 API magic. The tab control sends the TCM_ADJUSTRECT message to allow the app to adjust the tab size. Add a new class to your project and paste the code shown below. Compile. Drop the new control from the top of the toolbox onto your form.
You'll get the tabs at design time so you can easily switch between pages. The tabs are hidden at runtime, use the SelectedIndex or SelectedTab property to switch between "views".
using System;
using System.Windows.Forms;
class StackPanel : TabControl {
protected override void WndProc(ref Message m) {
// Hide tabs by trapping the TCM_ADJUSTRECT message
if (m.Msg == 0x1328 && !DesignMode) m.Result = (IntPtr)1;
else base.WndProc(ref m);
}
}
A good solution would be using a TabControl, and each panel is contained in a TabPage.
But I cannot find any way to hide the TabControl buttons, since I already have a
TreeView for selecting items.
For the above,
You need to set the following properties of TabControl.
tabControl.Multiline = true;
tabControl.Appearance = TabAppearance.Buttons;
tabControl.ItemSize = new System.Drawing.Size(0, 1);
tabControl.SizeMode = TabSizeMode.Fixed;
tabControl.TabStop = false;
I have a UISplitViewController which has a UINavigationController in the master and a UIViewController in the detail. When the device is orientated into landscape mode I want the normal behaviour to be preserved. I.e. The master gets shown in landscape and hidden in portrait.
However depending what the user clicks in the master depends on which UIViewController is loaded into the detail part of the UISplitViewController. What I would like is for the master to be hidden in landscape mode when a user clicks on a button in the detail UIViewController. The problem is I can't get this to work.
My delegate looks like this (have removed some lines for simpler viewing):
public class SplitControllerDelegate : UISplitViewControllerDelegate {
SplitViewController incomingController;
private bool hideMaster = false;
public override bool ShouldHideViewController (UISplitViewController svc,
UIViewController viewController,
UIInterfaceOrientation inOrientation) {
return hideMaster;
}
public void SetHideMaster(bool value) {
hideMaster = value;
}
}
I then call it from the detail UIViewController like
splitControllerDelegate.SetHideMaster(value);
However nothing changes. I'm unsure of how to make it perform the change? Should the master disappear immediately? What causes the WillHideViewController to fire?
Thanks
Mike
What you're trying to do cannot be done officially. ShouldHideViewController() is called only upon device rotation. So unless you rotate forth and back, your controller won't disappear.
You have various options:
Don't use UIListViewController but some other third party replacement
Use UIViewController containment feature of iOS5 and implement your own split view
Apply a hack to UISplitViewController
About the last point. You should be able to force ShouldHideViewController() being called if you set the Delegate property to NULL and then assign a new delegate. Afterwards, call the WillRotate() method of the split view controller using the current orientation.
I'd go for the 2nd option.
By design you cannot do much with the standard UISplitView, try that third party control :
https://github.com/mattgemmell/MGSplitViewController
I am trying to do this:
public class DialogMenuHawaii extends Dialog {
Style s = UiFactory.getBaseStyle();
s.setBgTransparency(0);
s.setBgImage( <my image >);
this.setUnselectedStyle(s);
}
but it doesn't work.
First, I suggest you use a theme. We constantly change small implementation details e.g. customizations like the one you are doing will not be portable between LWUIT 1.4 and 1.5. There is no reason whatsoever not to use a theme for something like this.
If you are interested in the pain and suffering of manually coding view logic into your application you can use several methods such as getDialogComponent() to get the style from them and manipulate that. Dialog is a complex beast due to the fact that its really a form padded away from the edges.
Open your '.res' file in resource Editor and select your preferred theme,
Under 'Unselected' tab open the DialogContentPane style, if you don't have one create it look at the end of this answer on HOW TO DO IT?, and set the background image to the image you need to show as Dialog bg
Under 'Unselected' tab open the DialogBody style, if you don't have one create it look at the end of this answer on HOW TO DO IT?, and set the background transparency as '0' and also make sure the background image type is NONE
NOTE: The above code will reflect for all the Dialogs in your application. If you want a particular dialog with background image than derive new styles from these default styles, and follow the above steps to apply it to your DialogMenuHawaii or any runtime Dialogs.
HOW TO: I would recommend you to go through the Shai's blog posts LWUIT Resource Editor Tutorial Part 1 till part 10. To better understand the Resouce Editor its features and capabilities.
:
:
:
PS: Programmatic-ally i haven't been able to achieve it using TextArea which is the case for default Dialog's. If you replace the dialog body component with Label if works fine, the code sample is given below. I haven't delved much into why is it so ? maybe will do it in my free time. Hence i have proposed a working alternative solution which is scripted above using Resource Editor and below using the code
class MyDialog extends Dialog {
public void show() {
Container octnPane = this.getDialogComponent();
octnPane.getUnselectedStyle().setBgTransparency(0, false);
Container ctnPane = (Container)((BorderLayout)octnPane.getLayout()).getCenter();
ctnPane.getUnselectedStyle().setBackgroundType(Style.BACKGROUND_IMAGE_SCALED, false);
ctnPane.getUnselectedStyle().setBgImage(myImage, false);
Label t = new Label("Dialog");
t.setUIID("DialogBody");
t.getUnselectedStyle().setBgTransparency(0, false);
ctnPane.addComponent(t);
super.show();
}
}
This is for Dialog background.
Dialog dialog = new Dialog();
dialog.getDialogStyle().setBgImage(Image.createImage("/image/image.png"));
If you want to set transparency of Dialog with image.
dialog.getStyle().setBgImage(Image.createImage("/image/image.png");
Am doing a calculator programme in vc++/MFC dialog application. Thier, i want to change the foreground and background colour of a push button in dialog. I have no idea, how to change.
Please suggests me with relevent code or example if any body have idea.
basu_sagar
There's no easy way to do this in a classical VC/MFC application, button colours are always system-defined. You either have to use a custom control, or create an owner-draw button. Handling WM_CTLCOLOR and returning a different brush doesn't work for buttons.
Edit:
This is an example replacement button control someone has built to solve this problem by encapsulating the owner-draw code into a class.
You can use a CMFCButton. Although you can directly say in your resources file a button is of this type, I do not recommend it, because it adds an unmaintainable hexadecimal piece of text on the rc file. And if you use several rc files, one for each language, it's really devilish!
So lets go. In your form class, declare a member
CMFCButton m_button1;
The DoDataExchange should look like:
void MyDialog::DoDataExchange(CDataExchange* pDX)
{
__super::DoDataExchange(pDX);
DDX_Control(pDX, IDC_BUTTON1, m_button1);
// ...
}
Then the OnInitDialog should be something like:
BOOL CMyDialog::OnInitDialog()
{
if(!__super::OnInitDialog())
return FALSE;
m_button1.SetFaceColor(RGB(0,0,255));
m_button1.SetTextColor(RGB(0,255,0));
m_button1.SetHotTextColor(RGB(255,0,0));
return TRUE;
}
The code I posted will draw a blue button, with green text, and when cursor hovers the button, its text will turn red.