Upload
ivory
View
27
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Creating a Visual Catalog with Maintain. Mark Derwin and Mark Rawls Information Builders Information Builders Summit 2011 User Conference June 2011. Creating a Visual Catalog with Maintain Overview. Create dynamic displays for images with thumb nails. - PowerPoint PPT Presentation
Citation preview
Creating a Visual Catalog with Maintain
Mark Derwin and Mark Rawls Information Builders
Information Builders Summit 2011 User Conference
June 2011
Copyright 2011, Information Builders. Slide 1
Copyright 2007, Information Builders. Slide 2
Creating a Visual Catalog with MaintainOverview
Create dynamic displays for images with thumb nails.Display larger image and allow for update and include.The Maintain language is perfect for creating these catalogs.Create databases to dynamically build the forms.Once deployed, users can access them from any browser:
IE, Firefox, Safari, Opera or ChromeAnd any smart device:
iPad, iPhone, Droid, Blackberry, etc…
Creating a Visual Catalog with MaintainOverview – Display the Catalog
Copyright 2007, Information Builders. Slide 3
Creating a Visual Catalog with MaintainOverview – Update Existing Information
Copyright 2007, Information Builders. Slide 4
Creating a Visual Catalog with MaintainCatalog Master
The database is a single segment file, so suffix can be anything. In this case, FOCUS.
File has 3 keys. If you have more or less categories, you can change this.
Copyright 2007, Information Builders. Slide 5
Creating a Visual Catalog with MaintainMaintain Commands – Data Structures
Variables in Maintain can be Computed and have 1 value: Compute var/fmt = val; All formats (except TXT available)
Or be part of a Stack.A stack is a checker board where
The columns are the database or computed fields.You can Compute non-database fields into a stack.
The rows are multiple values.Access a stack row, column or cell.Can be named anything and there is no limit to the amount of
stacks in an application.
Copyright 2007, Information Builders. Slide 6
Creating a Visual Catalog with MaintainMaintain Commands – Data Structures
You can load a stack from: The Database – NEXT Another Stack – COPY A TABLE procedure – EXEC A Winform – User Entry
You can Clear a Stack – STACK CLEAR stknameSort a stack – STACK SORT stkname by valCreate a Stack without loading it – INFER Loop through a Stack – REPEATStacks have 2 system variables:
Stkname.FOCINDEX – This is the current stack row Stkname.FOCCOUNT – Total rows in the stack
Copyright 2007, Information Builders. Slide 7
Creating a Visual Catalog with MaintainLaunching the Maintain Development Environment MDE
In Dev Studio locate the summitlab11 projectExpand the Maintain Files folderDouble click on demo to open the MDE
Copyright 2007, Information Builders. Slide 8
Creating a Visual Catalog with MaintainDisplaying the Code
Code created for you.First step in Top case is to set path to the imagesSecond step is to load up the Category drop down
Use Exec
Copyright 2007, Information Builders. Slide 9
Creating a Visual Catalog with MaintainLoading the Drop Down boxes
Use Exec to perform Non-Maintain procedures. Here we use Table with DST. To get ONLY unique values.
Pass variables and receive stacks. Variables retrieved sequentially.
Must create the stack to retrieve the data.
Copyright 2007, Information Builders. Slide 10
Creating a Visual Catalog with MaintainDisplaying the Form
Expand the Demo folderExpand the Forms folderClick on Form1 to displayAll objects have Properties and Events
Copyright 2007, Information Builders. Slide 11
Creating a Visual Catalog with MaintainAdding a Category Selection Box
Click on the Combo Box icon. Draw a rectangle on the form. Click on the rectangle. Select From a Variable Assign Catstk.Category as the List Source. Click Ok
Copyright 2007, Information Builders. Slide 12
Creating a Visual Catalog with MaintainAdding a Sub Category Selection Box
Click on the Combo Box icon again. Draw another rectangle on the form. Click on the rectangle. Select From a Variable Assign SubCatstk.SubCategory as the List Source. Click Ok
Copyright 2007, Information Builders. Slide 13
Creating a Visual Catalog with MaintainAdding HTMLTable to the form
Click on the HTMLTable icon Draw a rectangle under the combo boxes Select Prodstk
Select Prodname, itemno, price and thumb. Do not click Ok yet
Copyright 2007, Information Builders. Slide 14
Creating a Visual Catalog with MaintainAdding HTMLTable to the form
Copyright 2007, Information Builders. Slide 15
Double-click on Prodname.Change Link to Body OnlyClick Ok
• Double-click on thumb• Change title to Image• Change Width to 10• Justification to Centered• Change Content to HTML• Click Ok
Creating a Visual Catalog with MaintainAdding HTMLTable to the form
Click OK to return to the form.Click on Form and change
BackColor to white.Click on HTMLTableFind the HTMLTable propertiesSelect AlternateRowColorChange Border to 0 – NoneChange Font to:
MS Sans Serif 12Change GridLines to 0 – NoneChange HeaderFont to:
MS Sans Serif Bold 14
Copyright 2007, Information Builders. Slide 16
Creating a Visual Catalog with MaintainAdding Events to the form
Events determine what happens when something happens on your form.
All form objects have events.Events can be: Maintain cases, JavaScript, Web Links, Form
Close or Application close.Types of events are: Click, Change, Open, Focus, Blur,
Double Click, etc…All events for a form are displayed on one events page.Many ways to get to this page:
Click on an event on the events sheet of any object. From the Form menu – Edit event handlers Click on the Edit Events icon.
Copyright 2007, Information Builders. Slide 17
Creating a Visual Catalog with MaintainAdding Events to the form
Click on the first ComboBox (ComboBox1)Click on the Events Tab Click on Change and the Events form opensDrag getsub from Functions into ComboBox1 Change Event
Copyright 2007, Information Builders. Slide 18
Creating a Visual Catalog with MaintainAdding Events to the form
Select ComboBox2 from the dropdown and ChangeDrag Loader from Functions into ComboBox2 Change EventSave and Run the procedure.
Copyright 2007, Information Builders. Slide 19
Creating a Visual Catalog with MaintainAdding Events to the form
We take the criteria selected in the first Combo Box and use it to populate the second. Then we load up the HTMLTable.
Copyright 2007, Information Builders. Slide 20
Creating a Visual Catalog with MaintainLoading the HTMLTable
We take the selections from the Combo Boxes and use them as criteria in our NEXT statement. Catstk().category = Selected Category
We then loop through the stack and create the HTML to display in the HTMLTable column Thumb.
When the user makes a selection, we copy THAT row into detstk, create a larger image and display form2.
Copyright 2007, Information Builders. Slide 21
Creating a Visual Catalog with MaintainAdding Buttons
Clicking on the hyperlink allows you to update a row, but we want include as well.
Create two buttons on your form. Addbtn and Xbtn
Click on the button icon on the Controls Palette Draw a rectangle. Change the text to Add New and the name to Addbtn Repeat for the Exit Button. Name it Xbtn
Copyright 2007, Information Builders. Slide 22
Creating a Visual Catalog with MaintainAdding Events and Links
Go to the Events page by clicking on Events Click for either button. Select HTMLTable1 and Clicklink - Drag and drop show_detail into event Select Addbtn and Click - Drag and drop Addnew1 into event. Select Xbtn and Click - Click on the Close project icon on the top row Save and Click on Form2.
Copyright 2007, Information Builders. Slide 23
Creating a Visual Catalog with MaintainCreating Form2
Change the BackColor of the form. Expand the Stacks folder. Drag detstk onto the form and click Select All Deselect Pic and Description Click Ok to place forms on field.
Copyright 2007, Information Builders. Slide 24
Creating a Visual Catalog with MaintainAdding Description
Select the Multi-Edit box from the Control Palette. Draw a wide rectangle under the Image field. Double-click on the rectangle and assign the variable detstk.Decription Click Ok Find the Wrap property on the Properties sheet and change it to 2 – Hard.
Copyright 2007, Information Builders. Slide 25
Creating a Visual Catalog with MaintainAdding Image
Select the HTML icon from the Controls Palette. Draw a rectangle next to description. Click on the rectangle. Select the variable Detstk.pic to display the image. We COULD use the image control but this gives us control over the size.
Otherwise image would appear as the size it is save as.
Copyright 2007, Information Builders. Slide 26
Creating a Visual Catalog with MaintainAdding Browse Button
The Browse button allows us to Grab an image from disk or network Click on the HTML icon on the Controls Palette and draw a rectangle. Add the text exactly as below, not from a variable.
<td><input type="file" name="INPUTFL" value=""></td> Click Ok to save.
Copyright 2007, Information Builders. Slide 27
Creating a Visual Catalog with MaintainFinishing the Form
Add three buttons under HTML2 First: Update, name: UpBTN Second: Include, name: InbBTN Third: Close, name: CloseBTN Expand the Variables folder. Drag Val onto the form under the buttons. Go to the Events page.
Copyright 2007, Information Builders. Slide 28
Creating a Visual Catalog with Maintainform2 Events – Please note the lower case “f”
Select UpBTN and Click. Select the J-Scroll to add a JavaScript trigger This code grabs the Browsed value, places it in Val2 & performs Updater1
document.form2.Val_Edit.value=document.form2.INPUTFL.value; IWCTrigger("updater1");
Select IncBTN and Click. Select the J-Scroll to add a JavaScript trigger document.form2.Val_Edit.value=document.form2.INPUTFL.value; IWCTrigger(“Include1");
Select CloseBTN and Click. Click on the Close form icon
Copyright 2007, Information Builders. Slide 29
Creating a Visual Catalog with MaintainDynamic Winform Commands
Click on Demo to display the code. Uncomment the Winform Set commands in Show_detail and addnew1. Most winform properties are dynamic. If form is not displayed, MUST use SHOW_INACTIVE before setting. These commands toggle the Update and Include buttons.
Copyright 2007, Information Builders. Slide 30
Creating a Visual Catalog with MaintainThe rest of the code
First grab ONLY the image name by using MNTGETTOK. Update or include the record to the database. Copy the record to your image directory – Exec Newimage. If Update – Display new information to HTMLTable on Form1. If Include – Clear information on Form1. Save and Run.
Copyright 2007, Information Builders. Slide 31
Creating a Visual Catalog with MaintainMoving the Image file
Since we are only storing the image name, we have to move the file. This EXEC’d procedure takes the name of the file, &1, and copies it to the
location of the images. My example is local, if you have permissions, you can copy to Networks. We MAY be on the D drive now.
Copyright 2007, Information Builders. Slide 32
Creating a Visual Catalog with MaintainFinishing Touches
Open Form1. Select Image from the Controls Palette and draw a rectangle in the corner. Select New and navigate to the Summitlab11 folder. Select logo.jpg and click Open, Next, and Finish. Click Overwrite Existing, Ok and OK to place the image on the Form. Repeat for form2.
Copyright 2007, Information Builders. Slide 33
Creating a Visual Catalog with MaintainFinishing Touches
Select the Text icon from the Controls Palette. Add Text above each of the Drop Down Boxes on Form1 Change the Font to Bold 12.
Copyright 2007, Information Builders. Slide 34