Layout issue with Codename One - codenameone

At this moment I'm only testing my app in the simulator (as I'm having issues with "Send iOS Build" mentioned in another thread [Errors with Codename One "Send iOS Build" and "Send Android Build")
I'm experiencing some layout issues where it is not making use of the width and height correctly. The elements are left-aligned and there is unused space on the right side. And I need to scroll up and down instead of having everything fit within the visual area. Please see images.
The code are:
private final void show() {
loginSignupForm = new Form("Company", new BoxLayout(0));
Tabs loginSignupTabs = new Tabs();
Style loginSignupStyle = UIManager.getInstance().getComponentStyle("Tab");
prepareAndAddSignupTab(loginSignupTabs, loginSignupStyle);
prepareAndAddLoginTab(loginSignupTabs, loginSignupStyle);
loginSignupForm.add(loginSignupTabs);
loginSignupForm.show();
}
private void prepareAndAddLoginTab(Tabs loginSignupTabs, Style loginSignupStyle) {
loginID = new TextField();
loginPassword = new TextField();
Button loginButton = getLoginButton();
Component[] loginComponents = {
new Label("Email Address"),
loginID,
new Label("Password"),
loginPassword,
loginButton,
};
Container loginContainer = BoxLayout.encloseY(loginComponents);
FontImage loginIcon = FontImage.createMaterial(FontImage.MATERIAL_QUESTION_ANSWER, loginSignupStyle);
loginSignupTabs.addTab("Login", loginIcon, loginContainer);
}
What do I need to changenter code heree to get the elements to:
1. expand to the maximum width (no free space on the right)
2. fit within the visual area (for top-to-bottom)
Please note that I'm coding the elements because I find the (new) GUI Builder quite a challenge to use.

Firstly, don't pass a constant value as an argument to Layouts, coz the values might change in future Codename One updates and this will be difficult for you to debug. new BoxLayout(0) should be new BoxLayout(BoxLayout.Y_AXIS) or simply BoxLayout.y().
The above is where the problem arose but not the only problem because BoxLayout doesn't recognize 0 as a valid argument as it has only 3 which are X_AXIS = 1, Y_AXIS = 2, and X_AXIS_NO_GROW = 3.
If you change the above to use BoxLayout.Y_AXIS, it will work, but from the screenshot above, that's not the best solution.
In conclusion, change your code to below:
private final void show() {
loginSignupForm = new Form("Company", new BorderLayout());
Tabs loginSignupTabs = new Tabs();
Style loginSignupStyle = UIManager.getInstance().getComponentStyle("Tab");
prepareAndAddSignupTab(loginSignupTabs, loginSignupStyle);
prepareAndAddLoginTab(loginSignupTabs, loginSignupStyle);
loginSignupForm.add(BorderLayout.CENTER, loginSignupTabs);
loginSignupForm.show();
}

Related

Using Dynamic CEFSharp with ChromeTabs but AddressChanged is not exposed

I am making an app that started with the CEFSharp minimal example code and I am using ChromeTabs in Wpf. I have my CEFSharp diverting popup windows into tabs correctly but I am having an issue grabbing the URL of these dynamic CEFSharp windows. For some reason AddressChanged is not exposed for these dynamic windows. I have tried to make use of LoadingStateChanged to place the URL in a textbox but that creates all new issues with the threads. I have spent the past few days trying to get this to work and it is driving me crazy. This is how my new tab is created but it does not expose AddressChanged event.
int counttabs = tbControlRCI.Items.Count-1;
string popURL;
popURL = popup_request;
tbControlRCI = this.etTabCntrlRCI;
//here we should open a new tab and place a new rcibrowser in it and give it the url
RCIBrowser = new ChromiumWebBrowser(popURL);
RCIBrowser.Name = "RCIBrow_" + counttabs;
string shorturl = popURL.Substring(popURL.LastIndexOf("/"), popURL.Length - popURL.LastIndexOf("/"));
ChromeTabs.ChromeTabItem newTabItem = new ChromeTabs.ChromeTabItem
{
Header = shorturl,
Name = "RCITab_" + counttabs,
Content = RCIBrowser
};
LifespanHandler lifeRCI = new LifespanHandler();
RCIBrowser.LifeSpanHandler = lifeRCI;
lifeRCI.popup_request += life_popup_request;
tbControlRCI.Items.Add(newTabItem);
tbControlRCI.SelectedIndex = tbControlRCI.Items.Count - 1;
My XAML only has a ChromeTabsControl that I place all of these dynamic Tabs and Browsers into.
Can anyone show the error of my ways?
EDIT:
Ok, thanks amaitland, I have tried a few different ways to do that and it just does not update for some reason. All I need is a textbox to show the address the Browser is on, so one way is fine. So I tried this:
Binding b = new Binding();
b.Mode = BindingMode.OneWay;
b.Path = new PropertyPath("Address");
b.ElementName = "RCIBrowser";
txtbxRCI.SetBinding(TextBox.TextProperty, b);
Thanks a bunch,
Hometownnerd

addPullToRefresh function is not invoked when only one item exists

In my code I have a scrollable container, I want to call a refresh function when the user pulls down on the container.
venueList = new Container(BoxLayout.y());
venueList.setScrollableY(true);
venueList.addPullToRefresh(() -> {
refresh();
});
This works well when there is more then one item in the container, however, when there is only one item or less, this does not work.
The issue occurs both on the NetBeans simulator and on my ios device.
My current workaround is to add a button to the list if it is empty (after calling a web-service) named "REFRESH", with the refresh() function invoked on clicking it.
Update I just tried this with tabs too with the same result:
Form hi = new Form("Hi World", new BorderLayout());
Tabs t = new Tabs();
Container mainContainer = new Container(BoxLayout.y());
mainContainer.setScrollableY(true);
mainContainer.addPullToRefresh(() -> log("Pull..."));
t.addTab("Test Tabs", mainContainer);
hi.add(CENTER, t);
hi.show();
Original answer below:
This worked fine for me with no elements so I'm guessing there is a different issue such as placing the container within a nested scrollable hierarchy:
Form hi = new Form("Hi World", new BorderLayout());
Container mainContainer = new Container(BoxLayout.y());
mainContainer.setScrollableY(true);
mainContainer.addPullToRefresh(() -> log("Pull..."));
hi.add(CENTER, mainContainer);
hi.show();
#Shai, thank you for pointing me in the right direction, it indeed ended up being a nesting issue.
When I was adding my list container to the Tab container I was using the following code:
tabContainer.addTab("Around Me",aroundTabicon,BoxLayout.encloseY(venueList));
Note that the BoxLayout.encloseY was causing the issue, I removed it and ended up with the following:
tabContainer.addTab("Around Me",aroundTabicon,venueList);
And it seems to be working now.... thank you again.

codenameone Picker Alternative to ComboBox

I am getting my feet wet with Codename One. I have looked into more other options like Xamarin, PhoneGap, Ionic for cross platform but I kinda got hooked with Codename one as it really code once and run anywhere.
I've been going through ui elements and I am kinda blocked on populating a combobox (Alternative is Picker)
Let's say I have stores as value pair (storeId, storeName). I want to display the storeName in Picker but keep storeId as the value reference.
Once the store is selected I would like to pass the storeId to an API call.
Is this possible. This might be very simple question but seems bit difficult to implement (I am really new to mobile).
Thank you.
Our recommendation is to avoid ComboBox. It's a UI pattern that doesn't exist on iOS natively and would feel alien on modern phones. It exists in Codename One.
In this code from the sample above you can get a similar effect to a complex multi-field combo box:
Form hi = new Form("Button", BoxLayout.y());
String[] characters = { "Tyrion Lannister", "Jaime Lannister", "Cersei Lannister"};
String[] actors = { "Peter Dinklage", "Nikolaj Coster-Waldau", "Lena Headey"};
int size = Display.getInstance().convertToPixels(7);
EncodedImage placeholder = EncodedImage.createFromImage(Image.createImage(size, size, 0xffcccccc), true);
Image[] pictures = {
URLImage.createToStorage(placeholder, "tyrion","http://i.lv3.hbo.com/assets/images/series/game-of-thrones/character/s5/tyrion-lannister-512x512.jpg"),
URLImage.createToStorage(placeholder, "jaime","http://i.lv3.hbo.com/assets/images/series/game-of-thrones/character/s5/jamie-lannister-512x512.jpg"),
URLImage.createToStorage(placeholder, "cersei","http://i.lv3.hbo.com/assets/images/series/game-of-thrones/character/s5/cersei-lannister-512x512.jpg")
};
MultiButton b = new MultiButton("Pick A Lanister...");
b.addActionListener(e -> {
Dialog d = new Dialog();
d.setLayout(BoxLayout.y());
d.getContentPane().setScrollableY(true);
for(int iter = 0 ; iter < characters.length ; iter++) {
MultiButton mb = new MultiButton(characters[iter]);
mb.setTextLine2(actors[iter]);
mb.setIcon(pictures[iter]);
d.add(mb);
mb.addActionListener(ee -> {
b.setTextLine1(mb.getTextLine1());
b.setTextLine2(mb.getTextLine2());
b.setIcon(mb.getIcon());
d.dispose();
b.revalidate();
});
}
d.showPopupDialog(b);
});
hi.add(b);
hi.show();
If you insist on using a ComboBox you can use a model to give it any object data you want. Then create a cell render to display the data. This is all discussed in depth in the component section of Codname One's developer guide. Notice that since ComboBox derives from List a lot of the List tips and docs apply to ComboBox.

Printing text in Silverlight that measures larger than page

I have a silverlight application that allows people to enter into a notes field which can be printed, the code used to do this is:
PrintDocument pd = new PrintDocument();
Viewbox box = new Viewbox();
TextBlock txt = new TextBlock();
txt.TextWrapping = TextWrapping.Wrap;
Paragraph pg = new Paragraph();
Run run = new Run();
pg = (Paragraph)rtText.Blocks[0];
run = (Run)pg.Inlines[0];
txt.Text = run.Text;
pd.PrintPage += (s, pe) =>
{
double grdHeight = pe.PrintableArea.Height - (pe.PageMargins.Top + pe.PageMargins.Bottom);
double grdWidth = pe.PrintableArea.Width - (pe.PageMargins.Left + pe.PageMargins.Right);
txt.Width = grdWidth;
txt.Height = grdHeight;
pe.PageVisual = txt;
};
pd.Print(lblTitle.Text);
This simply prints the content of the textbox on the page however some of the notes are spanning larger than the page itself causing it to be cut off. How can I change my code to measure the text and add more pages OR is there a better way to do the above where it will automatically create multiple pages for me?
There are several solutions to your problem, all of them under "Multiple Page Printing Silverlight" on Google. I was having a similar problem and tried most of them. The only one that worked for me was this one:
http://www.codeproject.com/Tips/248553/Silverlight-converting-to-image-and-printing-an-UI
But honestly you should look at Google first and see whether there are better solutions to your specific problem.
Answering your question, there is a flag called HasMorePages that indicates you need a new page. Just type pe.HasMorePages and you will see.
Hope it helps
First you need to work out how many pages are needed
Dim pagesNeeded As Integer = Math.Ceiling(gridHeight / pageHeight) 'gets number of pages needed
Then once the first page has been sent to the printer, you need to move that data out of view and bring the new data into view ready to print. I do this by converting the whole dataset into an image/UI element, i can then adjust Y value accordingly to bring the next set of required data on screen.
transformGroup.Children.Add(New TranslateTransform() With {.Y = -(pageIndex * pageHeight)})
Then once the number of needed pages is reached, tell the printer to stop
'sets if there is more than 1 page to print
If pagesLeft <= 0 Then
e.HasMorePages = False
Exit Sub
Else
e.HasMorePages = True
End If
Or if this is too much work, you can simply just scale all the notes to fit onto screen. Again probably by converting to UI element.
Hope this helps

Dynamically populate GraphSource through PopulateGraphSource method - RadDiagram

I am facing an issue where my graph is tree layout and looks fine initially. However, if I choose to change GraphSource upon user input/ clicks using PopulateGraphSource like in the OrgChart example, I get all the nodes stacked on top of each other with no links and all in corner.
I tried resetting graphSource by creating a new one
this.graphSource = new GraphSource();
I also tried to use the Clear method for GraphSource. Neither did solve the problem, I keep having the same issue.
I am using
ObservableCollection<Node> hierarchicalDataSource;
to fill up my GraphSource object.
All I do is create a new one and then call
PopulateGraphSource();
method.
Similar issues: question in telerik support , telerik support different question
Try calling the Layout method on the diagram control. Here is a little fragment of code
TreeLayoutSettings settings = new TreeLayoutSettings()
{
TreeLayoutType = TreeLayoutType.TreeDown,
VerticalSeparation = 60,
HorizontalSeparation=30
};
if (this.diagram.Shapes.Count > 0)
{
settings.Roots.Add(this.diagram.Shapes[0]);
this.diagram.Layout(LayoutType.Tree, settings);
this.diagram.AutoFit();
//this.diagram.Zoom = 1;
}

Resources