Blog: Posts from January, 2011

Labels
AJAX(112) App Studio(7) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(183) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
Posts from January, 2011
Thursday, January 13, 2011PrintSubscribe
Data Controller URL Parameters

Code On Time applications recognize several URL parameters that allow constructing simple URL actions to open a multiple-purpose page in “new”, “edit” , or “view” mode.

The following URL will start a record in "new" mode.
 
http://dev.codeontime.com/demo/websitefactory1/Pages/Customers.aspx?_controller=Customers&_commandName=New&_commandArgument=createForm1

image
 
The following URL will start the Products page with product #7 displayed in "edit" mode.
 
http://dev.codeontime.com/demo/WebSiteFactory1/Pages/Products.aspx?ProductID=7&_controller=Products&_commandName=Edit&_commandArgument=editForm1

image
 
The following URL will select a Product record with ID = 35 in "view" mode:

http://dev.codeontime.com/demo/WebSiteFactory1/Pages/Products.aspx?ProductID=35&_controller=Products&_commandName=Select&_commandArgument=editForm1

image

The “_controller” parameter is optional if your page presents a single data controller. You have to use this parameter to ensure that master-detail pages will respond correctly. The following URL will navigate to the protected Suppliers page and will select supplier #22 in “edit” mode. You will have to sign in to access the page.

http://dev.codeontime.com/demo/WebSiteFactory6/Pages/Suppliers.aspx?SupplierID=22&_controller=Suppliers&_commandName=Edit&_commandArgument=editForm1

image

Notice that cancellation or successful Insert, Update, or Delete action will automatically navigate back to the previous page that was loaded in the browser prior to navigation with data controller URL parameters. This convenient behavior will save time that is typically needed to write redirection logic in similar situations.

Wednesday, January 12, 2011PrintSubscribe
Modifying User Interface With CSS

Code On Time applications rely exclusively on Cascading Style Sheets (CSS) to provide all presentation elements of generated web applications with colors, fonts, backgrounds, borders, paddings, margins, and other embellishments.

Here is a typical screen that you will find in an application generated with the default theme.

image

If you load your application in Internet Explorer browser, press F12 to bring up the Developer Toolbar and select Disable | CSS option on the toolbar then the page will looks similar to the following screen shot.

image

As you can see the page is “black on white” with a few blue links and lacks any style. This allows for total customization of the user interface. You may choose to follow the route of complete user interface customization from scratch or add incremental enhancements to the existing themes provided by Code On Time.

Here is how you can proceed with minor enhancements.

Activate Developer Toolbar window and select Disable|CSS one more time to enable the stylesheets in the browser window.

Click on the “arrow” icon of the Developer Toolbar and inspect any column in a data row of the grid view. If the selection rectangle does not show up when you move the mouse pointer over the page then click the “arrow” again to turn the selection mode off and hit “refresh” icon. Try selecting the UI element on the page again. This is needed if you have activated the toolbar and then interacted with the page in the browser. The toolbar will not be aware of the changes produced by AJAX scripts.

The screen shot shows a thin blue box around the cell in the first row of the Products grid in Category Name column. The Developer Toolbar on top of the browser shows the HTML corresponding to the selection. Three CSS classes Cell, CategoryID, and StringType and assigned to the table cell.

image

We will change the presentation of CategoryID field column to occupy 200 pixels horizontally.

Open you project in Visual Studio or Visual Web Developer. Select the folder ~/App_Themes/MyCompany and add the new CSS stylesheet item to your project. “MyCompany” is the default namespace of Code On Time projects. If you have changed the namespace of your project then choose the corresponding folder in the Solution Explorer.

image

Enter the following CSS rule into the stylesheet.

.Cell.CategoryID
{
    width: 200px;
}

Run the project and refresh the contents of the browser window.  The third column Category Name of the grid view is now substantially wider.

image

Use similar techniques to alter other elements of the user interface in your Code On Time applications.

Notice that sometimes your own CSS rules will come into conflict with the rules of core theme. Use the word “!important” right after the value of the CSS property as shown in the following example.

.Cell.CategoryID
{
    width: 200px !important;
}