Need Help Switching From SimplePanel To SmartGWT

[superman859]

I've been using SmartGWT for 1-2 months now and have most of an app developed. The majority of the app uses all SmartGWT items and panels, but the very first couple classes that get called use vanilla GWT. I need to find a way around this, because it seems that when I use SimplePanel (vanilla) some performance issues arise (CPU usage continually rises even without doing any actions).

I managed to change this code over to using SmartGWT, but when it was compiled as Javascript, the buttons were killed and events never worked. This is my issue.

Can someone help me change the following sample code from using GWT SimplePanel to using SmartGWT techniques? The main purpose is to add some wrapper object (whether it be a panel, a layout, etc - this will be the "main viewable screen of the app") to RootPanel in the div region "wrapper" (wrapper is used to center the whole app in the middle of browser using CSS, rather than positioning at 0,0 of browser like default draw() method seems to do) . When the user clicks login, the main wrapper object (login panel) should be replaced with another panel (main_panel - the main section of application). From there, everything is SmartGWT code and should work.

The bolded regions are the main issues I believe. Using Composite and SimplePanel. The code works below in both Hosted and Web mode - however, CPU usage gradually rises until it hardly runs anymore, even if you don't touch anything. I managed to avoid this issue by changing the SimplePanel to a VLayout. However, the login button / events would not function in Web mode anymore - just hosted.

public class GnetsProject implements EntryPoint {
	[b]private static SimplePanel panel;[/b]
	/**
	 * <code>onModuleLoad</code> is automatically called when this class is instantiated - in this case,
	 * when the application is started for the first time.
	 * 
	 */
	
	public void onModuleLoad() {
		
		// initialize data
		InitializationController.getInstance().initializeDataSource(new AsyncCallback() {

			public void onFailure(Throwable caught) {
				SC.say("The application failed to load properly.");
				
			}

			public void onSuccess(Object result) {
				//Load Faculty Records
				FacultyRecords.getInstance();
				
				// Load StudentRecords
				StudentRecords.getInstance();
				
			}
			
		});
		
		
		[b]panel.setWidget(new LoginPanel());[/b] 
		 
// add to the wrapper div region in HTML document
		[b]RootPanel.get("wrapper").add(panel);[/b]
		
		
		// remove the loading message
		Element loading = DOM.getElementById("loading");
		DOM.removeChild(RootPanel.getBodyElement(), loading);

		if (!GWT.isScript()) {
			KeyIdentifier debugKey = new KeyIdentifier();
			debugKey.setCtrlKey(true);
			debugKey.setKeyName("D");

			Page.registerKey(debugKey, new KeyCallback() {
				public void execute(String keyName) {
					SC.showConsole();
				}
			});
		}

	}
	
	/**
	 * Sets the widget of the <code>SimplePanel</code>.  This new widget will be the only thing visible in the 
	 * application.
	 * 
	 * @param new_widget	the widget to be used for the application
	 */
	public static void setPanel(Widget new_widget) {
		[b]panel.setWidget(new_widget);[/b]
	}
}

public class LoginPanel extends [b]Composite[/b] {
	VLayout layout = new VLayout();
	DynamicForm login_form;
	TextItem username; 
	PasswordItem password;
	ButtonItem login_button;
	
	/**
	 * Initializes the login form and displays it to the user
	 */
	public LoginPanel() {
		// configure form (omitted)
	
		
		// configure fields (omitted)
		
		
		login_button = new ButtonItem("Login");
		login_button.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent event) {
				// switch to main panel
				String user = (String) username.getValue();
				String plaintext = (String) password.getValue();
				String result = FacultyRecords.getInstance().verifyLogin(user, plaintext);
				if (!result.equals("Success")) {
					SC.say(result);
				}
				else {
					String[] full_name = user.split(",");
					String first_name = full_name[1].trim();
					String last_name = full_name[0].trim();
					Faculty user_logged_in = FacultyRecords.getInstance().getFacultyWithName(first_name, last_name);
	
					// change screen to main panel
					[b]GnetsProject.setPanel(new MainPanel(user_logged_in));[/b]
				}
				
			}
			
		});
		
		// add fields to form
		login_form.setFields(username, password, login_button);
		
		// add form to panel
		[b]initWidget(layout);[/b]
[b]layout.draw();[/b]
		
	}
}

public class MainPanel extends [b]Composite[/b] implements HistoryListener {
	VLayout main_layout = new VLayout();
	HLayout center_layout = new HLayout();
	Img header;
	NavigationWidget navigation;
	HLayout content_wrapper;
	ContentWidget home_widget; // ...
	ContentWidget weekly_widget;
	ContentWidget monthly_widget;
	
	ContentWidget student_widget;
	
	static Faculty user_logged_in;
	
	/**
	 * Initializes the application with a banner, navigation, content region, and footer.  Also registers
	 * this class as a <code>HistoryListener</code> in order to make use of the browser control buttons.
	 * @param user_logged_in		user who has passed verification in <code>LoginPanel</code>
	 */
	public MainPanel(Faculty f) {
		/*
		 * Set Faculty member
		 */
		user_logged_in = f;
		
		/*
		 * Add header image to the layout (some omitted)
		 */
		
		
		
		main_layout.addMember(header);
		main_layout.setID("main_layout");

		// Center layout holds navigation and content region
		center_layout.setID("center_layout");
		center_layout.setStyleName("center_layout");
		
		/*
		 * Add navigation to the layout
		 */
		navigation = new NavigationWidget(user_logged_in);
		navigation.setID("navigation");
		navigation.setStyleName("navigation");
		
		center_layout.addMember(navigation);
		

		/*
		 * Add Content region (some omitted)
		 */
		
		// Add widgets to the content region
		content_wrapper.addMember(HomeWidget.getInstance());
		
		// Add content region to center layout
		center_layout.addMember(content_wrapper);
	
		// Add center layout to main layout
		main_layout.addMember(center_layout);

		/*
		 * Add footer (some omitted)
		 */
		
		// Add footer to main layout
		main_layout.addMember(footer);
		
		
		/*
		 * Add this class as a HistoryListener so it gets notified everytime
		 * history changes
		 */

		History.addHistoryListener(this);

		[b]initWidget(main_layout);[/b]
// draw main_layout
[b]main_layout.draw();[/b]
		


	}

[Isomorphic]

No need to use CSS for centering, just add a VLayout around the whole thing with defaultLayoutAlign:"center".

[superman859]

No need to use CSS for centering, just add a VLayout around the whole thing with defaultLayoutAlign:"center".

Hmm - sounds like it would be easy to implement, but I must not be doing the basics correctly then.

I have my outermost item container (VLayout), which is in the EntryPoint class. I add a "login panel" initially to container, user logs in, and then I remove all members from container, and add the "main panel" to container (thus the only item in container is "main panel").

So, doing what you said, I thought I could just say

container.setDefaultLayoutAlign(Alignment.CENTER);

However, elements such as "login panel" and "main panel" (both of which extend VLayout) are still being drawn at 0,0 in the browser window. They do not appear to be centered. I did notice that some static text on the pages WAS centered though.

I do not want to center all of the elements in the application, such as centering all the text or things like that. I wish to center the whole application in the browser window. The application is 990px or so wide. However, many users have widescreen browsers larger than 1024x768px. Using CSS, we can easily place the 990px in the center of the browser, and add some basic background color to fill in the extra space on the left and right side in the browser. This is my goal.

I've halfway managed to get it to work, but not dynamically. If I manually enter the "outer container" (body tag) width as say 1440px, then the "inner container" will be centered in the 1440px. However, I cannot figure out how to call container.setWidth() and have it dynamically fill up the full browser window, whatever that width may be. using setAutoWidth() only sets it to grow as needed based on the inner container, but I would like for it to grow based on browser adjustment by the user.

The following is some simple code to set it up in CSS. The extra space for this page would have the color #369. The middle 990px in the browser would be where all the content is (from wrapper). Body uses text-align: center to center everything, which causes wrapper to be centered in website. wrapper then uses text-align: left to reset the text alignment so everything inside wrapper is left aligned.

body {
	background-color: #369;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100.1%;
	line-height: 1.5;
}

.wrapper {
	background-color: white;
	width: 990px;
	margin: 0 auto;
	position: relative;
	text-align: left;
}

[Isomorphic]

Set defaultLayoutAlign:"center" on the outermost container. Set the application inside this to 990px.

[superman859]

Found a solution to the centering issue. Similar lines as CSS. Create outer container, which signifies "body" tag in CSS. use setWidth100() which sets it to 100% of the browser screen (since this is the first thing drawn). Center the alignment on it. Add panel ("wrapper" div tag in CSS). Reset alignment so all text in app is not centered.

The key is to use container.setWidth100() to get that full browser screen width. From there, it is the same concepts as the CSS. Without using setWidth100() on the outermost container, the outermost container was only large enough to hold the inside container, 990px or 850px - however large it was defined. It was not the width of the browser window.

// configure container
		container.setDefaultLayoutAlign(Alignment.CENTER);
		container.setWidth100();
		
		// configure panel
		panel.setDefaultLayoutAlign(Alignment.LEFT);
		panel.setWidth(850);
		panel.setBackgroundColor("#003366");
		
		
		panel.addMember(new LoginPanel()); 
		container.addMember(panel);