Adding ToolBar to GridLayout - eclipse-plugin

I have a Gridlayout, and I am adding Link objects to the gridlayout. The code for the same:
GridLayout gridLayout= new GridLayout(items.size(), false);
gridLayout.marginWidth= 0;
gridLayout.marginHeight= 0;
gridLayout.verticalSpacing= 0;
gridLayout.horizontalSpacing= 0;
fComposite.setLayout(gridLayout);
fComposite.update();
fComposite is a composite with Gridlayout. The output is something like:
Everything is good uptill here. Problem arises when I try to add a ToolBar to this composite. I am adding toolbar like this:
ToolBar toolBar = new ToolBar(fComposite, SWT.BORDER| SWT.VERTICAL);
ToolItem toolItem = new ToolItem(toolBar, SWT.PUSH);
toolItem.setText("<<");
When I do this, output is like this. All the Line object shifts down and is half cut:
I guess the problem is that width of toolbar is more than of link object. When I make a new Shell and try to emulate the same thing it works fine. I guess the problem is in how the parent of this GridLayout is defined. It's a GridLayout. If it helps, I am working with trying to modify the BreadCrumb of JavaEditor of Eclipse IDE. Any help or lead will really help. Thanks.

Related

how to make recyclerview slide horizontal

i made a recycleview that works just fine and gets the data and show it but i want that instead of vertical scroll it will be horizontal scroll.
i searched and read that to control the scroll orientation behavior i need to use the LinearLayoutManager and set it like this:
LinearLayoutManager mLayoutManager = new LinearLayoutManager(this,LinearLayoutManager.HORIZONTAL,false);
recyleview.setLayoutManager(mLayoutManager);
but it dosent work and i dont know why all the examples i saw are with this at the core
anyone have any idea why?\
thanks for any help :)
it was about this line:
LinearLayoutManager mLayoutManager = new LinearLayoutManager(this,LinearLayoutManager.HORIZONTAL,false);
but since i tried a couple of tutorials i had this line somewhere else in my code that i forgot to delete it. the problem it was set with .VERTICAL so when it run the code with .HORIZONTAL was running just fine but because later in the adapter initialize i had the same line but with .VERTICAL so it just overwrite the .HORIZONTAL
so in conclusion just make sure you have ONE LinearLayoutManager initialize at a time :D

Is it possible to dynamically add a slide to an existing Materialize Carousel?

I am able to create a carousel as described here. The carousel appears and works properly.
Later on I would like to add an additional slide:
$(".carousel").append('<a class="carousel-item active" href="#six!"><img src="http://lorempixel.com/250/250/nature/6"></a>');
However, this does not appear to work as the slide does not get added to the carousel.
Is adding slides to an initialized carousel not supported or is this an issue on my end?
Sure it is. I haven't seen any solution in the internet. I believe that there might be a better and smoother solution but this one is mine.
All you need to do is after adding your new items remove the initialized class from already initialized main carousel div and reinitialize it.
//init carousel
var slider = $('.carousel');
slider.carousel();
//add a new item
slider.append('<a class="carousel-item active" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a>');
//remove the 'initialized' class which prevents slider from initializing itself again when it's not needed
if (slider.hasClass('initialized')){
slider.removeClass('initialized')
}
//just reinit the carousel
slider.carousel();
full working fiddle: https://jsfiddle.net/8tq4ycm3/
I had the same problem, but I'm using the slider. (http://materializecss.com/media.html#slider)
To resolve this, it was necessary to clear all items, re-add items with the new one, and then re-bind the slider.
Follow example: https://codepen.io/troits/pen/QvdZov
let itens = [];
function addItem(){
$('.slides').empty();
$('.slider > .indicators').detach();
itens.push(createItem());
for(i in itens){
$('.slides').append(itens[i]);
}
$('.slider').slider();
showItem(i);
}
function showItem(i){
$('.slider > .indicators > .indicator-item')[i].click();
}

Dojo grid inside titlePane not getting painted until the browser is resized

I have an dojo enhanced grid inside a title pane which inturn in Tabcontainer. I am creating a tab container dynamically and painting the title pane which contains grid. For the first time the grid is painted properly but if i close the tab and again try it to open a tabcontainer title pane is painted but grid inside the titlepane is not painted (or rather its not visible) until i do a browser resize.
So anybody have faced similar kind of issue? Please let me know the solution for this.
I tried resize(), update() & startup() methods on grid nothing worked out.
I am kind of stuck please share your thoughts on this.
Thanks,
Vikram
I had the same problem and found a workaround by doing a dojo connect like:
dojo.connect(Datagrid,"_onFetchComplete",DataGrid,"_resize");
So it should automatically be resized, when DataGrid finished loading data.
Hope I could help.
Greeting, Simon
Have you tried setting an absolute height on the Grid?
Which browsers did you try? (I experienced various problems with DataGrid in TabCointainer using IE)
You must call the TabContainer.layout() each time its container is changing size. For doing this, you could 1) monitor DOMEvents onunderflow and onoverflow on containing DOMNode or 2) when container becomes visible (once-n-forall).
Reason why a window.onresize event fixes it is, that the TabContainer hooks on said event and calls its own layout.
In your situation, where the TabController fiddles with TabContainer's panes, there may be missing a 'layoutChildren' somewhere. Optimally, you should place the grid as the first on only child to tab.
After the grid is deployed, it will take an absolute, calculated height - 'inherited' from the TabContainer. This is fired once the TabContainer chooses to resize or instructed to do so.
Manually, you should be able to implement these lines - after re-opening a tab. The script is taken from _Grid.js to illustrate
var grid = dijit.byId('MYGRIDID');
require(["dijit/layout/utils"], function(layerUtils) {
layoutUtils.layoutChildren(grid.domNode,
grid._contentBox,
[grid.tablist, {
domNode: grid.tablistSpacer,
layoutAlign: titleAlign
}, {
domNode: grid.containerNode,
layoutAlign: "client"
}]);
grid._containerContentBox = layoutUtils.marginBox2contentBox(grid.containerNode,
{
domNode: grid.containerNode,
layoutAlign: "client"
});
// note this line in particular
grid.selectedChildWidget.resize(grid._containerContentBox);
}
My issue
I had a similar situation as yours:
Grid is in a titlepane (closed by default).
Grid can be destroyed and re-created on the fly.
Issue appears when user:
opens the pane.
closes the pane.
re-creates the grid.
re-opens the pane.
grid is not visible, until browser window is resized!
My solution
My approach was to force a resize() on my grid whenever the title pane was being opened.
I used code like this, in a place where I had access to both the grid and the panes:
var titlePane = registry.byId("title-pane-id");
var handle = aspect.after(titlePane, "toggle", function(deferred) {
if (titlePane.open) {
grid.resize();
}
});
The dojo/aspect doc
Don't forget to remove the aspect from your grid if you destroy it.
I did this on dojo v1.8.1
My solution is too easy: define on declaration of grid the bold parameter write here:
grid = new EnhancedGrid({id: 'MyIDgrid',
store: dataStore = new ObjectStore({objectStore: myStore}),
structure: structureGrid,
plugins: pluginGrid,
style : 'width: 725px; height: 350px',
autoWidth : true,
**autoHeight : false,height:'200px',**
elasticView : '2'
}, document.createElement('div'));
this resolve all!
Enjoy!
style="height: auto;" will fit the purpose.

monotouch dialog cell sizing and section caption color

I am using monotouch dialog to generate a view. I managed to change the background color by subclassing DialogViewController, but the contrast with the section caption makes the text hard to read. How do I change the section caption color?
I am also using a StyledStringElement as a button in the same view. I cant seem to figure out how to shrink this element so that it looks more like a button. Please provide examples. Your help is appreciated.
To solve this issue I used a glassbutton with the it's HandleTapped handler as below.
var butt = new GlassButton(new RectangleF(80,150,150,50))
{
Font = UIFont.BoldSystemFontOfSize(22),
NormalColor = UIColor.Red,
};
void HandleTapped (GlassButton obj)
{
}
as for the colors, I used miguel's solution here. Hope this helps someone down the road.

Titanium Appcelerator Custom Buttons

I'm new with Appcelerator and I encountered an annoying problem regarding layout.
I have to do a menu bar that is very easy to do with plain html (ul>li>a and that's all). The problem is that it seems that all button-related functions are not... customizable. I want buttons to be displayed as plain text, not buttons.
The first thought was to use labels (instead of buttons). But... Is this a right way? I need a menu bar, not a text paragraph! Besides that, the menu is somehow flexible, not like labels.
This is one (of many!) things i tried:
var menu_color = Titanium.UI.createButton({
title:Ti.Locale.getString("menu_color") || "Color",
height:24,
top:10
});
I also added borderWidth:0 (no effect) and backgroundColor:none/transparent with no luck.
Help? :)
I usually use views when I need to create what you described above.
For example:
I use a view with a vertical layout, then add my child views. The child views then have listeners for the click or whatever event.
This allows you to have more control over the formatting. A side effect of this is you will need to create your own "press" ui cue in some cases.
var demo = {win : Ti.UI.currentWindow};
(function(){
//Create the container view
demo.vwMain = Ti.UI.createView({height:100, layout:'vertical', backgroundColor:'yellow'});
demo.win.add(demo.vwMain);
demo.fakebutton1 = Ti.UI.createView({height:40, backgroundColor:'blue',left:25,right:25,borderRadius:5,borderColor:'#000'});
demo.vwMain.add(demo.fakebutton1);
demo.fakebutton2 = Ti.UI.createView({top:5,height:40, backgroundColor:'green',left:25,right:25,borderRadius:5,borderColor:'#000'});
demo.vwMain.add(demo.fakebutton2);
demo.fakebutton1.addEventListener('click', function(e) {
alert('Clicked fake button 1');
});
demo.fakebutton2.addEventListener('click', function(e) {
alert('Clicked fake button 2');
});
})();
create a view with layout property is set to vertical and add label or button which you want.View is like in HTML.Hope you understand.